@use '~@moda/om';

.SelectableButton {
  $self: &;

  @include om.text(body2);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 100%;
  padding: om.spacing(2, 3);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  color: om.color(ink);
  border: 1px solid om.color(elephant);
  background-color: transparent;
  transition: background-color 200ms;

  > span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

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

  &--selected {
    &,
    &:hover {
      color: om.color(ink);
      border-color: om.color(ink);
      background-color: transparent;
    }
  }

  &--unavailable {
    &,
    &:hover {
      color: om.color(elephant);
      border-color: om.color(elephant);
      background: linear-gradient(
        to bottom right,
        white calc(50% - 1px),
        om.color(elephant),
        white calc(50% + 1px)
      );
    }
  }
}