@use '~@moda/om';

.Button {
  $self: &;

  @include om.text(eyebrow);
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: om.spacing(4, 7);
  border: 1px solid;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 200ms;

  // Insert space after icon if present
  > * {
    margin-right: om.space(2);
  }

  &,
  &--primary {
    color: om.color('snow');
    border-color: om.color(ink);
    background-color: om.color(ink);
    @include om.font-smoothing(subpixel);

    &#{$self}--hover,
    &:hover {
      color: om.color('snow');
      border-color: om.color(fog, 0.32);
      background: linear-gradient(0deg, om.color(fog, 0.32), om.color(fog, 0.32)), om.color(ink);
    }

    &#{$self}--focus,
    &:focus {
      color: om.color('snow');
      border-color: om.color(fog, 0.12);
      background: linear-gradient(0deg, om.color('snow', 0.12), om.color('snow', 0.12)),
        om.color(ink);
    }

    &#{$self}--disabled,
    &:disabled {
      color: om.color(ink);
      border-color: om.color(noise);
      background-color: om.color(noise);
      cursor: default;
      pointer-events: none;
    }
  }

  &--secondary {
    color: om.color(ink);
    border-color: om.color(ink);
    background-color: om.color('snow');

    &#{$self}--hover,
    &:hover {
      color: om.color(ink);
      border-color: om.color(ink);
      background-color: om.color(noise, 0.32);
    }

    &#{$self}--focus,
    &:focus {
      color: om.color(ink);
      border-color: om.color(ink);
      background-color: om.color(noise);
    }

    &#{$self}--disabled,
    &:disabled {
      color: om.color(cement);
      border-color: om.color(fog);
      background-color: om.color(noise);
      cursor: default;
      pointer-events: none;
    }
  }

  &--tertiary {
    @include om.text(body1);

    padding: om.spacing(2, 3);
    color: om.color(ink);
    border-color: om.color(elephant);
    background-color: om.color('snow');
    text-transform: none;
    line-height: 1.4;

    &#{$self}--hover,
    &:hover {
      color: om.color(ink);
      border-color: om.color(elephant);
      background-color: om.color(noise, 0.32);
    }

    &#{$self}--focus,
    &:focus {
      color: om.color(ink);
      border-color: om.color(elephant);
      background-color: om.color(noise);
    }

    &#{$self}--disabled,
    &:disabled {
      color: om.color(cement);
      border-color: om.color(fog);
      background-color: om.color(noise);
      cursor: default;
      pointer-events: none;
    }
  }

  &--elevated {
    box-shadow: 0px 1px 4px om.color(coal, 0.09);
  }

  &--chip {
    border-radius: 2rem;
  }
}