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

.start__button {
  align-items: center;
  border: none;
  color: $ads-color-main;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 2px;
  // transition: background-color 0.3s ease;

  &--primary {
    background-color: $ads-primary-main;
    font-family: Montserrat, sans-serif;
    font-size: 2.3rem;
    font-weight: 300;
    gap: 0.7rem;
    height: 1.375rem;
    margin-left: 2px;
    width: 6.938rem;

    @include respond-to('small-mobile') {
      font-size: 1.5rem;
      font-weight: 300;
      height: 2.5rem;
      width: 9rem;
    }

    @include respond-to('large') {
      font-size: 2.5rem;
      font-weight: 300;
      height: 3.063rem;
      width: 22.625rem;
    }
  }

  &--secondary {
    background-color: $ads-text-main;
    font-family: Roboto, sans-serif;
    font-size: 3.375rem;
    font-weight: $ads-font-size-first;
    gap: 0.7rem;
    height: 3.375rem;
    width: 19.5rem;

    @include respond-to('small-mobile') {
      font-size: 1.7rem;
      font-weight: 300;
      height: 2.5rem;
      width: 9rem;
    }

    @include respond-to('small') {
      font-size: 1.25rem;
      line-height: 1.465rem;
    }

    @include respond-to('large') {
      font-family: Roboto, sans-serif;
      font-weight: $ads-font-size-first;
      height: 3.375rem;
      width: 19.5rem;
    }
  }

  &--tertiary {
    background-color: $ads-primary-main;
    border-radius: 2rem;
    font-family: Montserrat, sans-serif;
    font-size: 2.5rem;
    font-weight: 300;
    gap: 0.7rem;
    height: 4.313rem;
    width: 15.688rem;
  }

  .start__button-icon {
    align-items: center;
    display: flex;
    height: 1.16rem;
    width: 1.16rem;

    @include respond-to('small-mobile') {
      font-size: 1.5rem;
      font-weight: 300;
      height: 2rem;
      width: 2rem;
    }
  }

  &:hover {
    background: $ads-secondary-main;
  }
}
