.button {
  @apply flex gap-2 shrink-0 items-center justify-center;
  @apply px-4 py-2;

  height: theme(height.9);
  border-radius: 3px;

  /* Add transition for smooth width animation */
  transition: width 0.5s ease 0.1s;

  &.s {
    @apply px-3 py-1.5;
    height: theme(height.7);
    border-radius: 2px;

    &:has(> .icon-start):has(> .label) {
      @apply pl-2;
    }

    &:has(> .icon-end):has(> .label) {
      @apply pr-2;
    }
  }

  &.primary {
    @apply bg-inv-acc-4 fg-inv-1;
    @apply border border-solid border-inv-4;

    box-shadow: 0.125rem 0.125rem 0 0 theme(colors.bg.inv.acc.3) inset;

    &.ghost {
      @apply bg-transparent border-none shadow-none;
    }

    &:hover {
      @apply bg-inv-acc-3 border-solid border-inv-acc-3;
      box-shadow: 0.125rem 0.125rem 0 0 theme(colors.bg.inv.acc.2) inset;
    }

    &:active {
      @apply bg-inv-acc-4 border-solid border-inv-3;
      box-shadow:
        0 0 0 0.0625rem theme(colors.off.white),
        0 0 0 0.125rem theme(colors.bg.inv.acc.4),
        -0.125rem -0.125rem 0 0 theme(colors.bg.inv.acc.1) inset;
    }

    &:focus-visible {
      @apply bg-inv-acc-4 border-solid border-inv-3;
      box-shadow:
        0 0 0 0.0625rem theme(colors.off.white),
        0 0 0 0.125rem theme(colors.border.semantic.info.1),
        0.125rem 0.125rem 0 0 theme(colors.bg.inv.acc.2) inset;
    }

    &:disabled {
      @apply bg-def-acc-3 border-solid border-def-3 fg-def-3 shadow-none;
    }

    & > .icon {
      @apply fg-inv-1;
    }
  }

  &.secondary {
    @apply bg-def-acc-2 fg-def-1;
    @apply border border-solid border-inv-2;

    box-shadow:
      -0.125rem -0.125rem 0 0 #cedfe2 inset,
      0.125rem 0.125rem 0 0 theme(colors.off.white) inset;

    &.ghost {
      @apply bg-transparent border-none shadow-none;
    }

    &:hover {
      @apply bg-def-acc-3 border-solid border-inv-3;
      box-shadow:
        -0.125rem -0.125rem 0 0 #cedfe2 inset,
        0.125rem 0.125rem 0 0 theme(colors.off.white) inset;
    }

    &:focus-visible {
      @apply bg-def-acc-3 border-solid border-inv-3;
      box-shadow:
        0 0 0 0.0625rem theme(colors.off.white),
        0 0 0 0.125rem theme(colors.border.semantic.info.1),
        -0.125rem -0.125rem 0 0 #cedfe2 inset,
        0.125rem 0.125rem 0 0 theme(colors.off.white) inset;
    }

    &:active {
      @apply bg-def-acc-3 border-solid border-inv-4;
      box-shadow:
        0 0 0 0.0625rem theme(colors.off.white),
        0 0 0 0.125rem theme(colors.bg.inv.acc.4),
        0.125rem 0.125rem 0 0 theme(colors.bg.inv.acc.2) inset;
    }

    &:disabled {
      @apply bg-def-2 border-solid border-def-2 fg-def-3 shadow-none;
    }

    & > .icon {
      @apply fg-def-1;

      &.icon-loading {
        color: #0051ff;
      }
    }
  }

  &.icon {
    @apply p-2;
  }

  &:has(> .icon-start):has(> .label) {
    @apply pl-3.5;
  }

  &:has(> .icon-end):has(> .label) {
    @apply pr-3.5;
  }

  & > div.loader {
    @apply w-0 opacity-0;
    @apply top-0 left-0 -mr-2;
    transition: all 0.5s ease;
  }

  &.loading {
    @apply cursor-wait;

    & > div.loader {
      @apply w-4 opacity-100;
      margin-right: revert;
      transition: all 0.5s ease;
    }
  }
}

/* button group */
.button-group .button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.button-group .button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.button-group .button:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
