// ============================================================================
// :: Option Button
// ============================================================================
/**
 * This option button offers the user a choice between 2 answers. Never less, never more.
 * It acts like a group of radio-buttons, but looks a bit more visually pleasing and inherits from the button styling.
 */

// ============================================================================
// :: Root
// ============================================================================
// .m-option-button {}

// ============================================================================
// :: Elements
// ============================================================================

.m-option-button__title {
  margin-bottom: 1rem;

  font-family: $font-family-sora;
  font-weight: $font-weight-bold;
  font-size: $font-size-1x-small;
  line-height: $line-height-1x-small;

  @include respond-at($breakpoint-tablet-default) {
    font-size: $font-size-base;
    line-height: $line-height-base;
  }
}

.m-option-button__content {
  margin-bottom: 1rem;
}

.m-option-button__tooltip {
  top: 0.2rem; // adding a tiny little bit of spacing.
  margin-left: 0.3rem;
}

.m-option-button__toggles {
  display: flex;
  width: 100%;

  &:focus {
    outline: 0.2rem solid $primary-color-base;
    outline-offset: -0.2rem;
  }
}

// Stack toggles vertically on tablet+ when text is large
html[data-text-zoom="large"],
html[data-text-zoom="xlarge"] {
  @include respond-at($breakpoint-tablet-default) {
    .m-option-button__toggles {
      flex-direction: column;
      gap: 1rem;
    }

    .m-option-button__item {
      width: 100%;
      margin-right: 0 !important;
    }
  }
}

.m-option-button__input {
  display: none;
}

.m-option-button__item {
  width: calc(50% - 1rem);

  &:first-child() {
    margin-right: 2rem;
  }

  &:focus {
    outline: 0.2rem solid $primary-color-base;
    outline-offset: -0.2rem;
  }
}

.m-option-button__label {
  @extend %__icon-checkmark;

  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  width: 100%;

  padding: 0.8rem 1rem;

  border: $border-width-base solid $background-color-base;
  border-radius: $border-radius-base;
  background-color: $background-color-base;
  color: $text-color-base;

  font-family: $font-family-sora;
  text-decoration: none;
  text-align: center;

  cursor: pointer;

  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;

  &::before {
    margin-left: 1rem;
    margin-right: -1rem;

    opacity: 0;

    transform: translateX(100%);

    transition:
      opacity 0.2s ease-in-out,
      transform 0.2s ease-in-out,
      margin 0.2s ease-in-out;
  }
}

.m-option-button__input:checked ~ .m-option-button__label {
  border-color: $primary-color-base;
  background-color: transparent;

  color: $primary-color-base;

  &::before {
    margin-right: 0;

    opacity: 1;

    transform: translateX(0%);
  }
}