@use "scss/colors";
@use "scss/mixins";

.link {
  color: colors.$grey-400;
  text-underline-offset: 2px;

  &:hover {
    color: colors.$blue-300;
  }

  &--primary {
    color: colors.$blue-400;
    text-decoration: none;

    &:hover {
      color: colors.$blue-300;
    }
  }

  &--button--primary {
    @include mixins.base-button;

    // primary
    color: colors.$white;
    width: fit-content;

    &:hover {
      background-color: colors.$blue-500;
    }

    &:active {
      background-color: colors.$blue-600;
    }

    background-color: colors.$blue-400;
  }

  &--button {
    @include mixins.base-button;

    // secondary
    color: colors.$grey-400;
    border: 1px solid colors.$grey-300;
    width: fit-content;

    &:hover {
      border-color: colors.$grey-400;
      color: colors.$grey-500;
    }

    &:active {
      border-color: colors.$grey-500;
      color: colors.$grey-500;
    }

    // custom background (secondary button has no background)
    background-color: colors.$foreground;
  }
}
