lila/ui/lib/css/component/_button.scss

.button {
  @extend %roboto, %box-radius;
  @include prevent-select;
  @include transition;
  @include backdrop-blur-if-transparent;

  font-weight: 500;
  background: $c-primary;
  text-transform: uppercase;
  padding: 0.8em 1em;
  border: none;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  display: inline-block;
  text-shadow: 0.5px 0.5px 0 $m-dimmer--fade-20;

  @include if-light {
    text-shadow: 0.5px 0.5px 0 $m-clearer--fade-30;
  }

  @include with-button-shadow(
    $m-primary--lighten-32,
    $m-primary--darken-18,
    $m-primary--lighten-44,
    $m-primary--darken-14
  );

  &,
  &:visited,
  &:focus {
    color: $c-over;
  }

  &:not(.disabled):hover {
    color: $c-over;
    background: $m-primary--lighten-7;
  }

  &:not(.disabled):focus-visible {
    @extend %focus-shadow;
  }

  &-no-upper {
    text-transform: none;
  }

  &-thin {
    padding: 0.1em 1em;
    font-size: 90%;
  }

  &-fat {
    font-size: 1.6rem;
  }

  &-green {
    @include with-button-shadow(
      $m-secondary--lighten-32,
      $m-secondary--darken-12,
      $m-secondary--lighten-44,
      $m-secondary--darken-9
    );

    background: $c-secondary;

    &:not(.disabled):hover {
      background: $m-secondary--lighten-4;
    }
  }

  &-red {
    @include with-button-shadow($m-bad--lighten-32, $m-bad--darken-15, $m-bad--lighten-44, $m-bad--darken-12);

    background: $c-bad;

    &:not(.disabled):hover {
      background: $m-bad--lighten-11;
    }
  }

  &-link {
    color: $c-link;

    &:hover,
    &:active,
    &:focus {
      color: $c-link-hover;
    }
  }

  &.button-empty {
    transition: none;
    background: none;
    box-shadow: none;

    @include if-light {
      box-shadow: none;
      text-shadow: 0.5px 0.5px 0 $m-dimmer--fade-20;
    }

    &,
    &:hover {
      color: $c-primary;
    }

    &:not(.disabled):hover {
      @extend %button-shadow;
    }

    &,
    &.button-green,
    &.button-red {
      &:not(.disabled):hover {
        @extend %metal;
      }
    }

    &.button-red,
    &.button-red:hover {
      color: $c-error;
    }

    &.button-green,
    &.button-green:hover {
      color: $c-secondary;
    }

    &.button-brag,
    &.button-brag:hover {
      color: $c-brag;
    }

    &.button-dim,
    &.button-dim:hover {
      color: $c-font-dim;
    }
  }

  &.button-metal {
    @extend %metal;

    &,
    &:not(.disabled):hover {
      color: $c-font;
    }
  }

  &.button-inverse {
    @extend %metal-inverse;

    &:not(.disabled):hover {
      @extend %metal-inverse-hover;
    }
  }

  &.disabled,
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  &.active {
    @extend %active;

    color: #fff;
  }

  &.active:not(.disabled):hover {
    @extend %active-hover;

    color: #fff;
  }
}

.button-set {
  @extend %flex-center;

  gap: 1.5em;
}