@import '../../../../globals/variables';
@import '../../../../globals/mixins';
@import '../../../../globals/fonts';

.button-variant {
  background-color: $ads-color-main;
  border: none;
  border-radius: 3.125rem;
  color: $ads-color-main;
  height: 1.375rem;
  width: 5.875rem;

  &:hover {
    opacity: 0.6;
  }

  .button-variant-label {
    color: $ads-text-main;
    font-family: Lato, Arial, Helvetica, sans-serif;
    font-size: 0.625rem;
    font-weight: $ads-font-weight;
  }

  &--secondary {
    background-color: $ads-primary-main;
    border-radius: 3.125rem;
    color: $ads-color-main;
    height: 2.063rem;
    transition: transform 0.3s ease;
    width: 7.563rem;

    &:hover {
      opacity: 0.6;
    }

    .button-variant-label {
      color: $ads-color-main;
      font-family: Lato, Arial, Helvetica, sans-serif;
      font-size: 0.75rem;
      font-weight: $ads-font-weight-second;
    }
  }

  &--tertiary {
    background-color: $ads-text-main;
    border-radius: 3.125rem;
    color: $ads-color-main;
    height: 1.688rem;
    transition: transform 0.3s ease;
    width: 6.563rem;

    &:hover {
      opacity: 0.6;
    }

    .button-variant-label {
      color: $ads-tertiary-main;
      font-family: Lato, Arial, Helvetica, sans-serif;
      font-size: 0.688rem;
      font-weight: $ads-font-weight-second;
    }
  }
}
