calcite-action.scss

:host {
  @extend %component-host;
  @apply flex bg-transparent;
}

:host([disabled]) {
  @apply pointer-events-none;
}

.button {
  @apply bg-foreground-1
    border-none
    cursor-pointer
    fill-color-3
    flex
    focus-base
    items-center
    justify-start
    m-0
    relative
    text-n2h
    font-medium
    text-color-3
    w-auto;
  font-family: inherit;
  text-align: unset;
  &:hover {
    @apply bg-foreground-2 text-color-1 fill-color-1;
  }

  &:focus {
    @apply bg-foreground-2 text-color-1 fill-color-1 focus-inset;
  }

  &:active {
    @apply bg-foreground-3;
  }

  .icon-container {
    @apply flex
      items-center
      justify-center
      m-0
      pointer-events-none;
    min-width: theme("spacing.4");
    min-height: theme("spacing.4");
  }

  .text-container {
    @apply leading-4
      truncate
      m-0
      w-0
      opacity-0
      ease-in-out
      duration-150
      transition-opacity;
    transition-property: margin;
    transition-property: width;
  }

  .text-container--visible {
    @apply flex-auto opacity-100 w-auto;
  }
}

:host([scale="s"]) {
  .button {
    @apply font-normal p-2 text-n2h;
  }
  .button--text-visible .icon-container {
    margin-inline-end: theme("spacing.2");
  }
}

:host([scale="m"]) {
  .button {
    @apply font-normal p-4 text-n1h;
  }
  .button--text-visible .icon-container {
    margin-inline-end: theme("spacing.3");
  }
}

:host([scale="l"]) {
  .button {
    @apply font-normal p-5 text-0h;
  }
  .button--text-visible .icon-container {
    margin-inline-end: theme("spacing.4");
  }
}

:host([alignment="center"]) .button {
  @apply justify-center;
}

:host([alignment="end"]) .button {
  @apply justify-end;
}

:host([alignment="center"]),
:host([alignment="end"]) {
  .button .text-container--visible {
    @apply flex-initial;
  }
}

// Compact
:host([scale="s"][compact]) .button,
:host([scale="m"][compact]) .button,
:host([scale="l"][compact]) .button {
  @apply px-0;
}

.slot-container {
  @apply flex;
}

.slot-container--hidden {
  @apply hidden;
}

.button--text-visible {
  @apply w-full;
}

:host([active]) .button,
:host([active]) .button:hover,
:host([active]) .button:focus,
:host([active][loading]) .button {
  @apply text-color-1 fill-color-1 bg-foreground-3;
}

:host([active]) .button:active {
  @apply bg-foreground-1;
}

:host([appearance="clear"]) .button {
  @apply bg-transparent
    transition-shadow
    duration-150
    ease-in-out;
}

:host([appearance="clear"]) .button:hover,
:host([appearance="clear"]) .button:focus {
  @apply bg-transparent;
  box-shadow: 0 0 0 2px theme("borderColor.color.1") inset;
}

:host([active][appearance="clear"]) .button,
:host([active][appearance="clear"]) .button:hover,
:host([active][appearance="clear"]) .button:focus {
  @apply text-color-1 fill-color-1 bg-foreground-3;
}

:host([appearance="clear"][loading]) .button,
:host([appearance="clear"][disabled]) .button {
  @apply bg-transparent;
}

:host([loading]) .button,
:host([loading]) .button:hover,
:host([loading]) .button:focus {
  @apply bg-foreground-1;
  .text-container {
    @apply opacity-disabled;
  }
}

:host([loading]) calcite-loader[inline] {
  @apply mr-0 text-color-3;
}

:host([disabled]) .button,
:host([disabled]) .button:hover,
:host([disabled]) .button:focus {
  @apply cursor-default opacity-disabled bg-foreground-1;
}

:host([disabled][active]) .button,
:host([disabled][active]) .button:hover,
:host([disabled][active]) .button:focus {
  @apply opacity-disabled bg-foreground-3;
}

:host([indicator]) {
  .button::after {
    content: "";
    @apply absolute
      border-2
      bg-brand
      rounded-full
      h-2
      w-2
      z-10;
    border-color: theme("colors.background.foreground.1");
    inset-block-end: theme("spacing.3");
    inset-inline-end: theme("spacing.3");
  }
  .button--text-visible {
    &::after {
      inset-block-end: auto;
    }
    .text-container--visible {
      margin-inline-end: theme("spacing.4");
    }
  }
  .button:hover::after,
  .button:focus::after {
    border-color: theme("colors.background.foreground.1");
  }
}

:host([indicator][scale="s"]) {
  .button::after {
    inset-block-end: theme("spacing.1");
    inset-inline-end: theme("spacing.1");
  }
  .button--text-visible::after {
    inset-block-end: auto;
    inset-inline-end: theme("spacing.2");
  }
}

:host([indicator][active]) .button::after {
  border-color: theme("colors.background.foreground.3");
}