.btn {
  @apply gap-2 font-semibold no-underline duration-200 ease-out;
  border-width: var(--border-btn, 1px);
  animation: button-pop var(--animation-btn, 0.25s) ease-out;
  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
  &:active:hover,
  &:active:focus {
    animation: button-pop 0s ease-out;
    transform: scale(var(--btn-focus-scale, 0.97));
  }

  /* default btn */
  & {
    @apply text-base-content outline-base-content no-underline shadow-sm;
    background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity));
    --tw-bg-opacity: 1;
    border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
    --tw-border-opacity: 1;
    @supports not (color: oklch(0% 0 0)) {
      background-color: var(--btn-color, var(--fallback-b2));
      border-color: var(--btn-color, var(--fallback-b2));
    }
    @media (hover: hover) {
      &:hover {
        @apply border-base-300 bg-base-300;
        @supports (color: color-mix(in oklab, black, black)) {
          background-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
            black
          );
          border-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
            black
          );
        }
        @supports not (color: oklch(0% 0 0)) {
          background-color: var(--btn-color, var(--fallback-b2));
          border-color: var(--btn-color, var(--fallback-b2));
        }
      }
    }
    &-active {
      @supports (color: color-mix(in oklab, black, black)) {
        background-color: color-mix(
          in oklab,
          oklch(var(--btn-color, var(--b3)) / var(--tw-bg-opacity, 1)) 90%,
          black
        );
        border-color: color-mix(
          in oklab,
          oklch(var(--btn-color, var(--b3)) / var(--tw-border-opacity, 1)) 90%,
          black
        );
      }
    }
    &:focus-visible {
      @apply outline outline-2 outline-offset-2;
    }
  }
  /* brand colors */
  &-primary {
    @apply text-primary-content outline-primary;
    @supports (color: oklch(0% 0 0)) {
      --btn-color: var(--p);
    }
    @supports not (color: oklch(0% 0 0)) {
      --btn-color: var(--fallback-p);
    }
  }
  &-secondary {
    @apply text-secondary-content outline-secondary;
    @supports (color: oklch(0% 0 0)) {
      --btn-color: var(--s);
    }
    @supports not (color: oklch(0% 0 0)) {
      --btn-color: var(--fallback-s);
    }
  }
  &-accent {
    @apply text-accent-content outline-accent;
    @supports (color: oklch(0% 0 0)) {
      --btn-color: var(--a);
    }
    @supports not (color: oklch(0% 0 0)) {
      --btn-color: var(--fallback-a);
    }
  }
  &-neutral {
    @apply text-neutral-content outline-neutral;
    @supports (color: oklch(0% 0 0)) {
      --btn-color: var(--n);
    }
    @supports not (color: oklch(0% 0 0)) {
      --btn-color: var(--fallback-n);
    }
  }

  /* btn with state colors */
  &-info {
    @apply text-info-content outline-info;
    @supports (color: oklch(0% 0 0)) {
      --btn-color: var(--in);
    }
    @supports not (color: oklch(0% 0 0)) {
      --btn-color: var(--fallback-in);
    }
  }
  &-success {
    @apply text-success-content outline-success;
    @supports (color: oklch(0% 0 0)) {
      --btn-color: var(--su);
    }
    @supports not (color: oklch(0% 0 0)) {
      --btn-color: var(--fallback-su);
    }
  }
  &-warning {
    @apply text-warning-content outline-warning;
    @supports (color: oklch(0% 0 0)) {
      --btn-color: var(--wa);
    }
    @supports not (color: oklch(0% 0 0)) {
      --btn-color: var(--fallback-wa);
    }
  }
  &-error {
    @apply text-error-content outline-error;
    @supports (color: oklch(0% 0 0)) {
      --btn-color: var(--er);
    }
    @supports not (color: oklch(0% 0 0)) {
      --btn-color: var(--fallback-er);
    }
  }

  /* glass */
  &.glass {
    @apply shadow-none outline-current;
    @media (hover: hover) {
      &:hover {
        --glass-opacity: 25%;
        --glass-border-opacity: 15%;
      }
    }
    &.btn-active {
      --glass-opacity: 25%;
      --glass-border-opacity: 15%;
    }
  }

  /* btn variants */
  &-ghost {
    @apply border border-transparent bg-transparent text-current shadow-none outline-current;
    @media (hover: hover) {
      &:hover {
        @apply border-transparent;
        @supports (color: oklch(0% 0 0)) {
          @apply bg-base-content/20;
        }
      }
    }
    &.btn-active {
      @apply bg-base-content/20 border-transparent;
    }
  }
  &-link {
    @apply text-primary border-transparent bg-transparent underline shadow-none outline-current;
    @media (hover: hover) {
      &:hover {
        @apply border-transparent bg-transparent underline;
      }
    }
    &.btn-active {
      @apply border-transparent bg-transparent underline;
    }
  }

  /* outline */
  &-outline {
    @apply text-base-content border-current bg-transparent shadow-none;
    @media (hover: hover) {
      &:hover {
        @apply border-base-content bg-base-content text-base-100;
      }
    }
    &.btn-active {
      @apply border-base-content bg-base-content text-base-100;
    }
    &.btn-primary {
      @apply text-primary;
      @media (hover: hover) {
        &:hover {
          @apply text-primary-content;
          @supports (color: color-mix(in oklab, black, black)) {
            background-color: color-mix(in oklab, theme(colors.primary) 90%, black);
            border-color: color-mix(in oklab, theme(colors.primary) 90%, black);
          }
        }
      }
      &.btn-active {
        @apply text-primary-content;
        @supports (color: color-mix(in oklab, black, black)) {
          background-color: color-mix(in oklab, theme(colors.primary) 90%, black);
          border-color: color-mix(in oklab, theme(colors.primary) 90%, black);
        }
      }
    }
    &.btn-secondary {
      @apply text-secondary;
      @media (hover: hover) {
        &:hover {
          @apply text-secondary-content;
          @supports (color: color-mix(in oklab, black, black)) {
            background-color: color-mix(in oklab, theme(colors.secondary) 90%, black);
            border-color: color-mix(in oklab, theme(colors.secondary) 90%, black);
          }
        }
      }
      &.btn-active {
        @apply text-secondary-content;
        @supports (color: color-mix(in oklab, black, black)) {
          background-color: color-mix(in oklab, theme(colors.secondary) 90%, black);
          border-color: color-mix(in oklab, theme(colors.secondary) 90%, black);
        }
      }
    }
    &.btn-accent {
      @apply text-accent;
      @media (hover: hover) {
        &:hover {
          @apply text-accent-content;
          @supports (color: color-mix(in oklab, black, black)) {
            background-color: color-mix(in oklab, theme(colors.accent) 90%, black);
            border-color: color-mix(in oklab, theme(colors.accent) 90%, black);
          }
        }
      }
      &.btn-active {
        @apply text-accent-content;
        @supports (color: color-mix(in oklab, black, black)) {
          background-color: color-mix(in oklab, theme(colors.accent) 90%, black);
          border-color: color-mix(in oklab, theme(colors.accent) 90%, black);
        }
      }
    }
    &.btn-success {
      @apply text-success;
      @media (hover: hover) {
        &:hover {
          @apply text-success-content;
          @supports (color: color-mix(in oklab, black, black)) {
            background-color: color-mix(in oklab, theme(colors.success) 90%, black);
            border-color: color-mix(in oklab, theme(colors.success) 90%, black);
          }
        }
      }
      &.btn-active {
        @apply text-success-content;
        @supports (color: color-mix(in oklab, black, black)) {
          background-color: color-mix(in oklab, theme(colors.success) 90%, black);
          border-color: color-mix(in oklab, theme(colors.success) 90%, black);
        }
      }
    }
    &.btn-info {
      @apply text-info;
      @media (hover: hover) {
        &:hover {
          @apply text-info-content;
          @supports (color: color-mix(in oklab, black, black)) {
            background-color: color-mix(in oklab, theme(colors.info) 90%, black);
            border-color: color-mix(in oklab, theme(colors.info) 90%, black);
          }
        }
      }
      &.btn-active {
        @apply text-info-content;
        @supports (color: color-mix(in oklab, black, black)) {
          background-color: color-mix(in oklab, theme(colors.info) 90%, black);
          border-color: color-mix(in oklab, theme(colors.info) 90%, black);
        }
      }
    }
    &.btn-warning {
      @apply text-warning;
      @media (hover: hover) {
        &:hover {
          @apply text-warning-content;
          @supports (color: color-mix(in oklab, black, black)) {
            background-color: color-mix(in oklab, theme(colors.warning) 90%, black);
            border-color: color-mix(in oklab, theme(colors.warning) 90%, black);
          }
        }
      }
      &.btn-active {
        @apply text-warning-content;
        @supports (color: color-mix(in oklab, black, black)) {
          background-color: color-mix(in oklab, theme(colors.warning) 90%, black);
          border-color: color-mix(in oklab, theme(colors.warning) 90%, black);
        }
      }
    }
    &.btn-error {
      @apply text-error;
      @media (hover: hover) {
        &:hover {
          @apply text-error-content;
          @supports (color: color-mix(in oklab, black, black)) {
            background-color: color-mix(in oklab, theme(colors.error) 90%, black);
            border-color: color-mix(in oklab, theme(colors.error) 90%, black);
          }
        }
      }
      &.btn-active {
        @apply text-error-content;
        @supports (color: color-mix(in oklab, black, black)) {
          background-color: color-mix(in oklab, theme(colors.error) 90%, black);
          border-color: color-mix(in oklab, theme(colors.error) 90%, black);
        }
      }
    }
  }

  /* disabled */
  &.btn-disabled,
  &[disabled],
  &:disabled {
    @apply bg-neutral text-base-content border-opacity-0 bg-opacity-20 text-opacity-20;
  }
  @media (hover: hover) {
    &-disabled:hover,
    &[disabled]:hover,
    &:disabled:hover {
      @apply bg-neutral text-base-content border-opacity-0 bg-opacity-20 text-opacity-20;
    }
  }
}

/* radio input and checkbox as button */
.btn:is(input[type="checkbox"]:checked),
.btn:is(input[type="radio"]:checked) {
  @apply border-primary bg-primary text-primary-content;
  @media (hover: hover) {
    &:hover {
      @supports (color: color-mix(in oklab, black, black)) {
        background-color: color-mix(in oklab, theme(colors.primary) 90%, black);
        border-color: color-mix(in oklab, theme(colors.primary) 90%, black);
      }
    }
  }
  &:focus-visible {
    @apply outline-primary;
  }
}

@keyframes button-pop {
  0% {
    transform: scale(var(--btn-focus-scale, 0.98));
  }
  40% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
