calcite-button.scss

:host {
  @apply inline-block w-auto align-middle;
}

// fab variants
:host([round]) {
  border-radius: 50px;
  & a,
  & button {
    border-radius: 50px;
  }
}

// focus styles
:host button,
:host a {
  @apply focus-base;
  &:focus {
    @apply focus-outset;
  }
}
// button base
:host button,
:host a {
  --calcite-button-content-margin: theme("margin.2"); // s 8px
  --calcite-button-padding-x: 7px;
  --calcite-button-padding-y: 3px;
  padding: var(--calcite-button-padding-y) var(--calcite-button-padding-x) var(--calcite-button-padding-y)
    var(--calcite-button-padding-x);
  @apply relative
    flex
    items-center
    justify-center
    no-underline
    w-full
    h-full
    rounded-none
    border-none
    select-none
    appearance-none
    cursor-pointer
    text-center
    box-border
    font-inherit
    font-normal;
  // include transition from focus
  transition: color var(--calcite-internal-animation-timing) ease-in-out,
    background-color var(--calcite-internal-animation-timing) ease-in-out,
    box-shadow var(--calcite-internal-animation-timing) ease-in-out, outline-offset 100ms ease-in-out,
    outline-color 100ms ease-in-out;
  &:hover {
    @apply no-underline;
  }
}

.content {
  @apply flex;
  flex-basis: auto;
  margin-inline-start: var(--calcite-button-content-margin);
  margin-inline-end: var(--calcite-button-content-margin);
}

.icon-start-empty {
  .content {
    margin-inline-start: unset;
  }
}
.icon-end-empty {
  .content {
    margin-inline-end: unset;
  }
}

:host([scale="m"]) {
  button,
  a {
    --calcite-button-content-margin: theme("margin.3");
  }
}
:host([scale="l"]) {
  button,
  a {
    --calcite-button-content-margin: theme("margin.4");
  }
}

// button width
:host([width="auto"]) {
  @apply w-auto;
}

:host([width="half"]) {
  @apply w-2/4;
}

:host([width="full"]) {
  @apply w-full;
}

// alignment
:host([alignment="center"]:not([width="auto"])) {
  a,
  button {
    @apply justify-center;
  }
}
:host([alignment="start"]:not([width="auto"])) {
  a,
  button {
    @apply justify-start;
  }
}
:host([alignment="end"]:not([width="auto"])) {
  a,
  button {
    @apply justify-end;
  }
}
:host([alignment*="space-between"]:not([width="auto"])) {
  a,
  button {
    @apply justify-between;
  }
}
:host([alignment="icon-start-space-between"]:not([width="auto"])) {
  .icon--start {
    margin-inline-end: auto;
  }
  a,
  button {
    text-align: unset;
  }
}
:host([alignment="icon-end-space-between"]:not([width="auto"])) {
  .icon--end {
    margin-inline-start: auto;
  }
  a,
  button {
    text-align: unset;
  }
}

// only two icons
:host([alignment="center"]) {
  a:not(.content--slotted),
  button:not(.content--slotted) {
    .icon--start + .icon--end {
      margin-inline-start: var(--calcite-button-content-margin);
    }
  }
}

.icon {
  @apply inline-flex
    relative
    m-0
    font-normal;
  line-height: inherit;
}

// disabled styles
:host([loading]),
:host([disabled]) {
  @apply pointer-events-none;
  button,
  a {
    @apply pointer-events-none opacity-disabled;
  }
}

@keyframes loader-in {
  0% {
    width: 0;
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    width: 1em;
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes loader-out {
  0% {
    width: 1em;
    opacity: 1;
    transform: scale(1);
  }
  100% {
    width: 0;
    opacity: 0;
    transform: scale(0.5);
  }
}

.calcite-button--loader {
  @apply flex;
  calcite-loader {
    @apply m-0;
    transition: width var(--calcite-internal-animation-timing-slow) ease-in-out,
      opacity var(--calcite-internal-animation-timing-slow) ease-in-out,
      transform var(--calcite-internal-animation-timing-slow) ease-in-out;
    &.loading-in {
      animation-name: loader-in;
      animation-duration: 310ms;
    }
    &.loading-out {
      animation-name: loader-out;
      animation-duration: 310ms;
    }
  }
}

:host([loading]) {
  // center loading spinner when button has text
  button.content--slotted,
  a.content--slotted {
    .calcite-button--loader calcite-loader {
      margin-inline-end: var(--calcite-button-content-margin);
    }
  }
  // hide icons when loading with no text
  button:not(.content--slotted),
  a:not(.content--slotted) {
    .icon--start,
    .icon--end {
      @apply hidden;
    }
  }
}

// button styles
// solid
:host([appearance="solid"]) {
  button,
  a {
    @apply border
      border-solid
      border-color-transparent;
  }
}
:host([appearance="solid"][color="blue"]) {
  button,
  a {
    @apply text-color-inverse bg-brand;
    &:hover,
    &:focus {
      @apply bg-brand-hover;
    }
    &:active {
      @apply bg-brand-press;
    }
    calcite-loader {
      @apply text-color-inverse;
    }
  }
}
:host([appearance="solid"][color="red"]) {
  button,
  a {
    @apply text-color-inverse bg-danger;
    &:hover,
    &:focus {
      @apply bg-danger-hover;
    }
    &:active {
      @apply bg-danger-press;
    }
    calcite-loader {
      @apply text-color-inverse;
    }
  }
}
:host([appearance="solid"][color="neutral"]) {
  button,
  a {
    @apply text-color-1 bg-foreground-3;
    &:hover,
    &:focus {
      @apply bg-foreground-2;
    }
    &:active {
      @apply bg-foreground-1;
    }
    calcite-loader {
      @apply text-color-1;
    }
  }
}
:host([appearance="solid"][color="inverse"]) {
  button,
  a {
    @apply text-color-inverse;
    background-color: var(--calcite-ui-inverse);
    &:hover,
    &:focus {
      background-color: var(--calcite-ui-inverse-hover);
    }
    &:active {
      background-color: var(--calcite-ui-inverse-press);
    }
    calcite-loader {
      @apply text-color-inverse;
    }
  }
}
// outline
:host([appearance="outline"]) {
  button,
  a {
    @apply bg-foreground-1 border border-solid;
    box-shadow: inset 0 0 0 1px transparent;
  }
}
:host([appearance="outline"][color="blue"]) {
  button,
  a {
    @apply border-color-brand;
    color: theme("colors.brand");
    &:hover {
      @apply border-color-brand-hover;
      color: theme("colors.brand-hover");
      box-shadow: inset 0 0 0 1px var(--calcite-ui-brand-hover);
    }
    &:focus {
      @apply border-color-brand;
      color: theme("colors.brand");
      box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
    }
    &:active {
      @apply border-color-brand-press;
      color: theme("colors.brand-press");
      box-shadow: inset 0 0 0 2px var(--calcite-ui-brand-press);
    }
    calcite-loader {
      color: theme("colors.brand");
    }
  }
}
:host([appearance="outline"][color="red"]) {
  button,
  a {
    @apply border-color-danger;
    color: theme("colors.danger");
    &:hover {
      @apply border-color-danger-hover;
      color: theme("colors.danger-hover");
      box-shadow: inset 0 0 0 1px var(--calcite-ui-danger-hover);
    }
    &:focus {
      @apply border-color-danger;
      color: theme("colors.danger");
      box-shadow: inset 0 0 0 2px var(--calcite-ui-danger);
    }
    &:active {
      @apply border-color-danger-press;
      color: theme("colors.danger-press");
      box-shadow: inset 0 0 0 2px var(--calcite-ui-danger-press);
    }
    calcite-loader {
      color: theme("colors.danger");
    }
  }
}
:host([appearance="outline"][color="neutral"]) {
  button,
  a {
    @apply text-color-1;
    border-color: theme("backgroundColor.foreground.3");
    &:hover {
      box-shadow: inset 0 0 0 1px var(--calcite-ui-foreground-3);
    }
    &:focus {
      box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-3);
    }
    &:active {
      box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-3);
    }
    calcite-loader {
      @apply text-color-1;
    }
  }
}
:host([appearance="outline"][color="inverse"]) {
  button,
  a {
    @apply text-color-1;
    border-color: var(--calcite-ui-inverse);
    &:hover {
      border-color: var(--calcite-ui-inverse-hover);
      box-shadow: inset 0 0 0 1px var(--calcite-ui-inverse-hover);
    }
    &:focus {
      border-color: var(--calcite-ui-inverse);
      box-shadow: inset 0 0 0 2px var(--calcite-ui-inverse);
    }
    &:active {
      border-color: var(--calcite-ui-inverse-press);
      box-shadow: inset 0 0 0 2px var(--calcite-ui-inverse-press);
    }
    calcite-loader {
      @apply text-color-1;
    }
  }
}
// clear
:host([appearance="clear"]) {
  button,
  a {
    @apply bg-transparent border border-solid;
    box-shadow: inset 0 0 0 1px transparent;
  }
}
:host([appearance="clear"][color="blue"]) {
  button,
  a {
    @apply border-color-brand;
    color: theme("colors.brand");
    &:hover {
      @apply border-color-brand-hover;
      color: theme("colors.brand-hover");
      box-shadow: inset 0 0 0 1px var(--calcite-ui-brand-hover);
    }
    &:focus {
      @apply border-color-brand;
      color: theme("colors.brand");
      box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
    }
    &:active {
      @apply border-color-brand-press;
      color: theme("colors.brand-press");
      box-shadow: inset 0 0 0 2px var(--calcite-ui-brand-press);
    }
    calcite-loader {
      color: theme("colors.brand");
    }
  }
}
:host([appearance="clear"][color="red"]) {
  button,
  a {
    @apply border-color-danger;
    color: theme("colors.danger");
    &:hover {
      @apply border-color-danger-hover;
      color: theme("colors.danger-hover");
      box-shadow: inset 0 0 0 1px var(--calcite-ui-danger-hover);
    }
    &:focus {
      @apply border-color-danger;
      color: theme("colors.danger");
      box-shadow: inset 0 0 0 2px var(--calcite-ui-danger);
    }
    &:active {
      @apply border-color-danger-press;
      color: theme("colors.danger-press");
      box-shadow: inset 0 0 0 2px var(--calcite-ui-danger-press);
    }
    calcite-loader {
      color: theme("colors.danger");
    }
  }
}
:host([appearance="clear"][color="neutral"]) {
  button,
  a {
    @apply text-color-1;
    border-color: theme("backgroundColor.foreground.3");
    &:hover {
      box-shadow: inset 0 0 0 1px var(--calcite-ui-foreground-3);
    }
    &:focus {
      box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-3);
    }
    &:active {
      box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-3);
    }
    calcite-loader {
      @apply text-color-1;
    }
  }
}
:host([appearance="clear"][color="inverse"]) {
  button,
  a {
    @apply text-color-1;
    border-color: var(--calcite-ui-inverse);
    &:hover {
      border-color: var(--calcite-ui-inverse-hover);
      box-shadow: inset 0 0 0 1px var(--calcite-ui-inverse-hover);
    }
    &:focus {
      border-color: var(--calcite-ui-inverse);
      box-shadow: inset 0 0 0 2px var(--calcite-ui-inverse);
    }
    &:active {
      border-color: var(--calcite-ui-inverse-press);
      box-shadow: inset 0 0 0 2px var(--calcite-ui-inverse-press);
    }
    calcite-loader {
      @apply text-color-1;
    }
  }
}

:host([appearance="outline"][split-child="primary"]) button,
:host([appearance="clear"][split-child="primary"]) button {
  border-inline-end-width: 0;
  border-inline-start-width: theme("borderWidth.DEFAULT");
}

:host([appearance="outline"][split-child="secondary"]) button,
:host([appearance="clear"][split-child="secondary"]) button {
  border-inline-start-width: 0;
  border-inline-end-width: theme("borderWidth.DEFAULT");
}

// transparent
:host([appearance="transparent"]:not(.enable-editing-button)) {
  button,
  a {
    @apply bg-transparent;
    &:hover,
    &:focus {
      background-color: var(--calcite-button-transparent-hover);
    }
    &:active {
      background-color: var(--calcite-button-transparent-press);
    }
  }
}
:host([appearance="transparent"][color="blue"]) {
  button,
  a {
    color: theme("colors.brand");
    &:hover {
      color: theme("colors.brand-hover");
    }
    &:focus {
      color: theme("colors.brand");
    }
    &:active {
      color: theme("colors.brand-press");
    }
    calcite-loader {
      color: theme("colors.brand");
    }
  }
}

:host([appearance="transparent"][color="red"]) {
  button,
  a {
    color: theme("colors.danger");
    &:hover {
      color: theme("colors.danger-hover");
    }
    &:focus {
      color: theme("colors.danger");
    }
    &:active {
      color: theme("colors.danger-press");
    }
    calcite-loader {
      color: theme("colors.danger");
    }
  }
}

:host([appearance="transparent"][color="neutral"]:not(.cancel-editing-button)) {
  button,
  a,
  calcite-loader {
    @apply text-color-1;
  }
}

:host([appearance="transparent"][color="neutral"].cancel-editing-button) {
  button {
    @apply text-color-3
      border-t
      border-t-color-input
      border-b
      border-b-color-input;
    border-bottom-style: solid;
    border-top-style: solid;

    &:not(.content--slotted) {
      --calcite-button-padding-y: 0;
    }

    &:hover {
      @apply text-color-1;
    }
  }
}

:host([appearance="transparent"][color="neutral"].enable-editing-button) {
  button {
    @apply bg-transparent;
  }
}

:host(.confirm-changes-button),
:host(.cancel-editing-button),
:host(.enable-editing-button) {
  button {
    &:focus {
      outline-offset: -2px; // ensure focus outlines work in Safari
    }
  }
}

:host([appearance="transparent"][color="inverse"]) {
  button,
  a,
  calcite-loader {
    @apply text-color-inverse;
  }
}

// generate button scales (scenario: text exists)
:host([scale="s"]) button.content--slotted,
:host([scale="s"]) a.content--slotted {
  @apply text-n2h;
}
// accommodate for transparent buttons not having borders
:host([scale="s"][appearance="transparent"]) button.content--slotted,
:host([scale="s"][appearance="transparent"]) a.content--slotted {
  --calcite-button-padding-x: theme("padding.2");
  --calcite-button-padding-y: theme("padding.1");
}
:host([scale="m"]) button.content--slotted,
:host([scale="m"]) a.content--slotted {
  --calcite-button-padding-x: 11px;
  @apply text-n1h;
}
:host([scale="m"]:not([appearance="transparent"])) button.content--slotted,
:host([scale="m"]:not([appearance="transparent"])) a.content--slotted {
  --calcite-button-padding-y: 7px;
}
// accommodate for transparent buttons not having borders
:host([scale="m"][appearance="transparent"]) button.content--slotted,
:host([scale="m"][appearance="transparent"]) a.content--slotted {
  --calcite-button-padding-x: theme("padding.3");
  --calcite-button-padding-y: theme("padding.2");
}
:host([scale="l"]) button.content--slotted,
:host([scale="l"]) a.content--slotted {
  --calcite-button-padding-x: 15px;
  @apply text-0h;
}
:host([scale="l"]:not([appearance="transparent"])) button.content--slotted,
:host([scale="l"]:not([appearance="transparent"])) a.content--slotted {
  --calcite-button-padding-y: 11px;
}
// accommodate for transparent buttons not having borders
:host([scale="l"][appearance="transparent"]) button.content--slotted,
:host([scale="l"][appearance="transparent"]) a.content--slotted {
  --calcite-button-padding-x: theme("padding.4");
  --calcite-button-padding-y: theme("padding.3");
}

// generate fab scales (scenario: 1 icon, ie., should be square)
:host([scale="s"]) button:not(.content--slotted),
:host([scale="s"]) a:not(.content--slotted) {
  --calcite-button-padding-x: theme("padding[0.5]");
  --calcite-button-padding-y: 3px;
  @apply text-0h w-6;
  min-height: theme("height.6");
}
// accommodate for transparent buttons not having borders
:host([scale="s"][appearance="transparent"]) button:not(.content--slotted),
:host([scale="s"][appearance="transparent"]) a:not(.content--slotted) {
  --calcite-button-padding-y: theme("padding.1");
}
:host([scale="m"]) button:not(.content--slotted),
:host([scale="m"]) a:not(.content--slotted) {
  --calcite-button-padding-x: theme("padding[0.5]");
  --calcite-button-padding-y: 7px;
  @apply text-0h w-8;
  min-height: theme("height.8");
}
// accommodate for transparent buttons not having borders
:host([scale="m"][appearance="transparent"]) button:not(.content--slotted),
:host([scale="m"][appearance="transparent"]) a:not(.content--slotted) {
  --calcite-button-padding-y: theme("padding.2");
}
:host([scale="l"]) button:not(.content--slotted),
:host([scale="l"]) a:not(.content--slotted) {
  --calcite-button-padding-x: theme("padding[0.5]");
  --calcite-button-padding-y: 9px;
  @apply text-0h w-11;
  min-height: theme("height.11");
}
// accommodate for transparent buttons not having borders
:host([scale="l"][appearance="transparent"]) button:not(.content--slotted),
:host([scale="l"][appearance="transparent"]) a:not(.content--slotted) {
  --calcite-button-padding-y: theme("padding[2.5]");
}

// generate fab scales (scenario: 2 icons, ie., should not be square)
:host([scale="s"][icon-start][icon-end]) button:not(.content--slotted),
:host([scale="s"][icon-start][icon-end]) a:not(.content--slotted) {
  --calcite-button-padding-x: 23px;
  @apply text-0h h-6;
}
// accommodate for transparent buttons not having borders
:host([scale="s"][icon-start][icon-end][appearance="transparent"]) button:not(.content--slotted),
:host([scale="s"][icon-start][icon-end][appearance="transparent"]) a:not(.content--slotted) {
  --calcite-button-padding-x: theme("padding.6");
}
:host([scale="m"][icon-start][icon-end]) button:not(.content--slotted),
:host([scale="m"][icon-start][icon-end]) a:not(.content--slotted) {
  --calcite-button-padding-x: theme("padding.8");
  @apply text-0h h-8;
}
// accommodate for transparent buttons not having borders
:host([scale="m"][icon-start][icon-end][appearance="transparent"]) button:not(.content--slotted),
:host([scale="m"][icon-start][icon-end][appearance="transparent"]) a:not(.content--slotted) {
  --calcite-button-padding-x: 33px;
}
:host([scale="l"][icon-start][icon-end]) button:not(.content--slotted),
:host([scale="l"][icon-start][icon-end]) a:not(.content--slotted) {
  --calcite-button-padding-x: 43px;
  @apply text-0h h-11;
  // add space between when only 2 icons
  .icon--start + .icon--end {
    margin-inline-start: theme("margin.4");
  }
}
// accommodate for transparent buttons not having borders
:host([scale="l"][icon-start][icon-end][appearance="transparent"]) button:not(.content--slotted),
:host([scale="l"][icon-start][icon-end][appearance="transparent"]) a:not(.content--slotted) {
  --calcite-button-padding-x: theme("padding.11");
}