/* Unstyled */
.wui-btn {
  @apply rounded cursor-pointer flex-wrap flex-shrink-0 text-center;
  @apply transition ease-in-out duration-200 inline-flex items-center justify-center select-none;
  @apply space-x-2 h-10 text-sm min-h-10 px-4;
  line-height: 1em;
  &:focus {
    @apply outline-none;
  }

  .wui-btn-icon-wrapper * {
    @apply h-full;
  }

  .wui-btn-icon-wrapper .wui-btn-icon {
    @apply h-full;
  }

  /* disabled */
  &-disabled,
  &[disabled] {
    @apply pointer-events-none;
  }

  /* shapes */
  &-wide {
    @apply w-full;
  }
  &-square {
    @apply h-10 p-0 w-10;
  }
  &-circle {
    @apply rounded-full h-10 w-10 p-0;
  }
  &-round {
    @apply rounded-full;
  }

  /* loading */
  &.loading {
    &,
    &:hover {
      @apply pointer-events-none;
    }
    &:before {
      @apply rounded-full border-2 h-4 mr-2 w-4;
      animation: spin 2s linear infinite;
      content: "";
      border-top-color: transparent;
      border-left-color: transparent;
      border-bottom-color: currentColor;
      border-right-color: currentColor;
    }
  }

  &-xs {
    @apply h-6 min-h-6 px-2 text-xs;
  }
  &-sm {
    @apply h-8 min-h-8 px-3 text-sm;
  }
  &-base {
    @apply h-10 min-h-10 px-4;
  }
  &-lg {
    @apply h-16 min-h-16 px-6 text-2xl;
  }

  &-wide.wui-btn {
    @apply w-64;
  }
  &-block.wui-btn {
    @apply w-full;
  }
  &-square{
    &:where(.wui-btn-xs) {
      @apply h-6 p-0 w-6;
    }
    &:where(.wui-btn-sm) {
      @apply h-8 p-0 w-8;
    }
    &:where(.wui-btn-md) {
      @apply h-12 p-0 w-12;
    }
    &:where(.wui-btn-lg) {
      @apply h-16 p-0 w-16;
    }
  }
  &-circle{
    &:where(.wui-btn-xs) {
      @apply rounded-full h-6 p-0 w-6;
    }
    &:where(.wui-btn-sm) {
      @apply rounded-full h-8 p-0 w-8;
    }
    &:where(.wui-btn-md) {
      @apply rounded-full h-12 p-0 w-12;
    }
    &:where(.wui-btn-lg) {
      @apply rounded-full h-16 p-0 w-16;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .wui-btn.loading:before{
    animation: spin 10s linear infinite;
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* group */
.wui-btn-group {
  @apply flex flex-wrap;
  & > input[type="radio"].wui-btn {
    @apply appearance-none;
  }
  & > input[type="radio"].wui-btn:before {
    content: attr(data-title);
  }
}

/* Styled */

.wui-btn {
  @apply font-semibold uppercase;
  border-width: var(--border-btn, 1px);
  animation: button-pop var(--animation-btn, 0.20s) ease-out;
  text-transform: var(--btn-text-case, uppercase);

  &:active:hover,
  &:active:focus{
    animation: none;
  }
  &:active:hover,
  &:active:focus{
    transform: scale( var(--btn-focus-scale, 0.95) );
  }

  /* default btn */
  @apply border-neutral-300;
  @apply dark:border-neutral-700;
  &:hover,
  &.wui-btn-active {
    @apply border-neutral-800;
    @apply dark:border-neutral-400;
  }
  &:focus-visible {
    @apply border-info-500 shadow shadow-info-500;
  }

  /* test btn */
  &-type--test {
    @apply bg-test-200 border-test-400 text-test-700;
    @apply dark:(border-test-700 bg-test-800 text-test-400);
    &:hover,
    &.wui-btn-active {
      @apply bg-test-300 border-test-500;
      @apply dark:(bg-test-700 border-test-600);
    }
  }
  /* neutral btn */
  &-type--neutral {
    @apply bg-neutral-200 border-neutral-400 text-neutral-700;
    @apply dark:(border-neutral-700 bg-neutral-800 text-neutral-400);
    &:hover,
    &.wui-btn-active {
      @apply bg-neutral-300 border-neutral-500;
      @apply dark:(bg-neutral-700 border-neutral-600);
    }
  }
  /* brand colors */
  &-type--primary {
    @apply bg-primary-600 border-primary-700 text-white;
    &:hover,
    &.wui-btn-active {
      @apply bg-primary-700 border-primary-900;
    }
  }
  &-type--secondary {
    @apply bg-secondary-600 border-secondary-700 text-white;
    &:hover,
    &.wui-btn-active {
      @apply bg-secondary-700 border-secondary-900;
    }
  }
  &-type--accent {
    @apply bg-accent-600 border-accent-500 text-accent-100;
    &:hover,
    &.wui-btn-active {
      @apply bg-accent-700 border-accent-900;
    }
  }
  &-type--black {
    @apply bg-black border-black text-neutral-200;
    &:hover,
    &.wui-btn-active {
      @apply text-white;
    }
  }

  /* btn with state colors */
  &-type--info {
    @apply bg-info-600 border-info-500 text-info-100;
    &:hover,
    &.wui-btn-active {
      @apply bg-info-700 border-info-800;
    }
  }
  &-type--success {
    @apply bg-success-600 text-success-100;
    &:hover,
    &.wui-btn-active {
      @apply bg-success-700;
      @apply dark:(bg-success-300);
    }
  }
  &-type--warning {
    @apply bg-warning-600 border-warning-500 text-warning-100;
    &:hover,
    &.wui-btn-active {
      @apply bg-warning-700 border-warning-800;
    }
  }
  &-type--danger {
    @apply bg-danger-600 border-danger-500 text-danger-100;
    &:hover,
    &.wui-btn-active {
      @apply bg-danger-700 border-danger-800;
    }
  }

  /* glass */
  &.glass{
    &:hover,
    &.wui-btn-active {
      --glass-opacity: 25%;
      --glass-border-opacity: 15%;
    }
  }

  /* outline */
  &-outline {
    @apply bg-transparent;
    &:hover {
      @apply bg-neutral-200 border-neutral-500 text-black;
      @apply dark:(bg-neutral-800 text-white);
    }
    &.wui-btn-type---neutral {
      @apply border-neutral-400 text-neutral-700;
      @apply dark:(border-neutral-600 text-neutral-400);
      &:hover {
        @apply bg-neutral-200 border-neutral-600 text-black;
      }
    }
    &.wui-btn-type--primary {
      @apply border-primary-400 text-primary-600;
      @apply dark:(border-primary-600 text-primary-400);
      &:hover {
        @apply bg-primary-500 text-white;
      }
    }
    &.wui-btn-type--secondary {
      @apply border-secondary-400 text-secondary-600;
      @apply dark:(border-secondary-600 text-secondary-400);
      &:hover {
        @apply bg-secondary-500 text-white;
      }
    }
    &.wui-btn-type--accent {
      @apply border-accent-400 text-accent-600;
      @apply dark:(border-accent-600 text-accent-400);
      &:hover {
        @apply bg-accent-500 text-white;
      }
    }
    &.wui-btn-type--black {
      @apply border-neutral-400 text-neutral-800;
      @apply dark:(border-neutral-600 text-neutral-200);
      &:hover {
        @apply bg-black text-white;
        @apply dark:(bg-white text-black);
      }
    }
    &.wui-btn-type--success {
      @apply border-success-400 text-success-600;
      @apply dark:(border-success-700 text-success-400);
      &:hover {
        @apply bg-success-500 text-white;
      }
    }
    &.wui-btn-type--info {
      @apply border-info-400 text-info-600;
      @apply dark:(border-info-700 text-info-400);
      &:hover {
        @apply bg-info-500 text-white;
      }
    }
    &.wui-btn-type--warning {
      @apply border-warning-700 text-warning-600;
      @apply dark:(border-warning-700 text-warning-400);
      &:hover {
        @apply bg-warning-500 text-white;
      }
    }
    &.wui-btn-type--danger {
      @apply border-danger-700 text-danger-600;
      @apply dark:(border-danger-700 text-danger-400);
      &:hover {
        @apply bg-danger-500 text-white;
      }
    }
  }

  /* btn variants */
  &-type--ghost {
    @apply border text-current;
    background-color: transparent;
    border-color: transparent;
    &:hover,
    &.wui-btn-active {
      @apply bg-neutral-600 bg-opacity-20 border-opacity-0;
    }
  }
  &-type--link {
    @apply bg-none border-none !text-link-500;
    background-color: transparent;
    &:hover,
    &.wui-btn-active {
      @apply border-transparent text-link-700 underline;
      background-color: transparent;
    }
  }

  /* disabled */
  &-disabled,
  &[disabled] {
    @apply bg-neutral-100 border-neutral-300 !text-neutral-400;
    @apply dark:(bg-neutral-800 border-neutral-700 !text-neutral-600);

    &.wui-btn-type--ghost,
    &.wui-btn-type--link {
      @apply bg-transparent;
    }
  }

  /* empty */
  &-empty {
    padding: 9px;
  }

  &-text {
  }

  /* loading */
  &.wui-btn-loading {
    &.wui-btn-square:before,
    &.wui-btn-circle:before {
      @apply mr-0;
    }
    &.wui-btn-xl:before,
    &.wui-btn-lg:before {
      @apply h-5 w-5;
    }
    &.wui-btn-sm:before,
    &.wui-btn-xs:before {
      @apply h-3 w-3;
    }
  }
}
/* group */
.wui-btn-group {
  & > input[type="radio"]:checked.wui-btn,
  & > .wui-btn-active {
    @apply bg-accent-600 border-accent-700 text-accent-200;
    &:focus-visible {
      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
    }
  }
  & > .wui-btn:not(:first-child) {
    @apply rounded-l-none -ml-px;
  }
  & > .wui-btn:not(:last-child) {
    @apply rounded-r-none;
  }
}

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