.button {
  @apply items-center inline-flex h-10 mb-0 gap-2;

  .button__content {
    @apply w-full;

    img,
    svg {
      @apply inline-block;
    }
  }

  .spinner {
    @apply px-2 py-0;
  }

  // @TODDO - Remove after moving all buttons to woot-button
  .icon + .button__content {
    @apply w-auto;
  }

  &.expanded {
    @apply flex justify-center text-center;
  }

  &.round {
    @apply rounded-full;
  }

  // @TODO Use with link

  &.compact {
    @apply pb-0 pt-0;
  }

  &.hollow {
    @apply border border-slate-200 dark:border-slate-600 text-woot-700 dark:text-woot-100 hover:bg-woot-50 dark:hover:bg-woot-900;

    &.secondary {
      @apply text-slate-700 border-slate-200 dark:border-slate-600 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
    }

    &.success {
      @apply text-green-700 dark:text-green-100 hover:bg-green-50 dark:hover:bg-green-800;
    }

    &.alert {
      @apply text-red-700 dark:text-red-100 hover:bg-red-50 dark:hover:bg-red-800;
    }

    &.warning {
      @apply text-yellow-700 dark:text-yellow-100 hover:bg-yellow-50 dark:hover:bg-yellow-800;
    }

    &:hover {
      @apply bg-slate-75 dark:bg-slate-900 border-slate-100 dark:border-slate-700;

      &.secondary {
        @apply border-slate-100 dark:border-slate-700 text-slate-800 dark:text-slate-100;
      }

      &.success {
        @apply border-slate-100 dark:border-slate-700 text-green-800 dark:text-green-100;
      }

      &.alert {
        @apply border-slate-100 dark:border-slate-700 text-red-700 dark:text-red-100;
      }

      &.warning {
        @apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-700;
      }
    }
  }

  // Smooth style
  &.smooth {
    @apply bg-woot-50 dark:bg-woot-800 text-woot-700 dark:text-woot-100 hover:text-woot-700 dark:hover:text-woot-700 hover:bg-woot-100 dark:hover:bg-woot-900;

    &.secondary {
      @apply bg-slate-50 dark:bg-slate-700 text-slate-700 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-800;
    }

    &.success {
      @apply bg-green-50 dark:bg-green-700 text-green-700 dark:text-green-100 hover:bg-green-100 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
    }

    &.alert {
      @apply bg-red-50 dark:bg-red-700 dark:bg-opacity-50 text-red-700 dark:text-red-100 hover:bg-red-100 dark:hover:bg-red-800 dark:hover:bg-opacity-30;
    }

    &.warning {
      @apply bg-yellow-100 dark:bg-yellow-100 text-yellow-700 dark:text-yellow-700 hover:bg-yellow-200 dark:hover:bg-yellow-200;
    }
  }

  &.clear {
    @apply text-woot-500 dark:text-woot-500;

    &.secondary {
      @apply text-slate-700 dark:text-slate-100;
    }

    &.success {
      @apply text-green-700 dark:text-green-100;
    }

    &.alert {
      @apply text-red-700 dark:text-red-100;
    }

    &.warning {
      @apply text-yellow-700 dark:text-yellow-600;
    }

    &:hover {
      @apply hover:bg-woot-50 dark:hover:bg-woot-900/50 hover:text-woot-500 dark:hover:text-woot-100;

      &.secondary {
        @apply hover:bg-slate-50 dark:hover:bg-slate-700 hover:text-slate-800 dark:hover:text-slate-100;
      }

      &.success {
        @apply hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
      }

      &.alert {
        @apply hover:bg-red-50 dark:hover:bg-red-800 hover:text-red-700 dark:hover:text-red-100;
      }

      &.warning {
        @apply hover:bg-yellow-100 dark:hover:bg-yellow-800 hover:text-yellow-700 dark:hover:text-yellow-600;
      }
    }

    &:active {
      &.secondary {
        @apply active:bg-slate-100 dark:active:bg-slate-900;
      }
    }

    &:focus {
      &.secondary {
        @apply focus:bg-slate-50 dark:focus:bg-slate-700;
      }
    }
  }

  // Sizes
  &.tiny {
    @apply h-6;
  }

  &.small {
    @apply h-8 pb-1 pt-1;
  }

  &.large {
    @apply h-12;
  }

  &.button--only-icon {
    @apply justify-center pl-0 pr-0 w-10;

    &.tiny {
      @apply w-6;
    }

    &.small {
      @apply w-8;
    }

    &.large {
      @apply w-12;
    }
  }

  &.link {
    @apply h-auto m-0 p-0;

    &:hover {
      @apply underline;
    }
  }
}