.button {
  @apply flex gap-2 shrink-0 items-center justify-center;
  @apply h-[2.125rem] px-4 py-2 rounded-[0.1875rem];

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

  &.s {
    @apply h-[1.625rem] px-3 py-1.5 rounded-[0.125rem];

    &.hasIcon {
      @apply pl-2;
    }

    &.hasEndIcon {
      @apply pr-2;
    }
  }

  &.xs {
    @apply h-[1.125rem] gap-0.5 p-2 rounded-[0.125rem];

    &.hasIcon {
      @apply pl-1.5;
    }

    &.hasEndIcon {
      @apply pr-1.5;
    }
  }

  &.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-transparent 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;
    }
  }

  &.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-transparent 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;
    }
  }

  &.fit {
    @apply w-fit;
  }

  &.iconOnly {
    @apply p-2;
  }

  &.hasIcon {
    @apply pl-3.5;
  }

  &.hasEndIcon {
    @apply pr-3.5;
  }

  &.loading {
    @apply cursor-wait;
  }
}

.button.in-HostFileInput-horizontal {
  @apply max-w-[18rem];
  @apply grow;
}
.button.in-TagSelect {
  @apply ml-auto;
}
.button.in-UpdateProgress {
  @apply mt-3;
}
.button.in-InstallProgress {
  @apply mt-3;
}
.button.in-FlashProgress {
  @apply mt-2;
}
.button.in-CheckHardware {
  @apply gap-3;
}
.button.in-ConfigureService {
  @apply ml-auto;
}

/* 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;
}
