@use 'src/styles/mixins';

.Button {
  @include mixins.core-with-fonts;
  $self: &;
  border-radius: 3px;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  padding: 9px 12px;
  transition: all 0.1s;
  white-space: nowrap;

  &--disabled {
    cursor: auto;
  }

  &--contained {
    box-shadow: 0 4px 4px rgba(4, 34, 53, 0.25);
    color: var(--color-white);

    &#{$self}--primary {
      background: var(--color-primary);
      border-color: var(--color-primary);

      &:hover {
        background: var(--color-primary-hover);
        border-color: var(--color-primary-hover);
      }

      &#{$self}--disabled,
      &#{$self}--disabled:hover {
        background: var(--color-primary-disabled);
        border-color: var(--color-primary-disabled);
      }
    }

    &#{$self}--secondary {
      background: var(--color-white);
      border-color: var(--color-gray-100);
      box-shadow: 0 0 3px rgba(47, 58, 67, 0.3);
      color: var(--color-secondary);

      &:hover {
        background: var(--color-gray-050);
        border-color: var(--color-gray-100);
      }

      &#{$self}--disabled,
      &#{$self}--disabled:hover {
        background: var(--color-white);
        border-color: var(--color-primary-disabled);
        color: var(--color-gray-300);
      }
    }

    &#{$self}--tertiary {
      background: var(--color-tertiary);
      border-color: var(--color-tertiary);

      &:hover {
        background: var(--color-tertiary);
        border-color: var(--color-tertiary);
      }
    }
  }

  &--link {
    background: transparent;
    border-color: transparent;

    &:hover {
      text-decoration: underline;
    }

    &#{$self}--primary {
      color: var(--color-primary);

      &#{$self}--disabled,
      &#{$self}--disabled:hover {
        color: var(--color-primary-disabled-text);
        text-decoration: none;
      }
    }
  }
}