@import url("../index.scss");

.digit-radio-options-wrap {
  @apply leading-10 flex justify-between flex-wrap;
  margin-bottom: theme(digitv2.spacers.spacer2);

  @media (max-aspect-ratio: 9/16) {
    @apply flex-col;
  }

  div {
    @apply block mb-md;
  }

  &.vertical{
    flex-direction: column
  }

  .digit-radio-btn-wrap {
    @apply block float-left relative;

    &:hover {
      .digit-radio-btn-checkmark {
        border-color: theme(digitv2.lightTheme.primary-1);
      }
    }

    &:active {
      .digit-radio-btn-checkmark {
        outline: 0.188rem solid #FFFAF7;
        border-color: theme(digitv2.lightTheme.primary-1);
      }
    }

  }

  .radio-option-container {
    @apply inline-flex;
    gap: theme(digitv2.spacers.spacer2);
    align-items: self-start;

    &.disabled {
      .digit-radio-btn-checkmark {
        border: 0.063rem solid theme(digitv2.lightTheme.text-disabled);
        background-color: theme(digitv2.lightTheme.paper-secondary);
      }
    }


    &.preselected {
      .digit-radio-btn-checkmark {
        border: 0.125rem solid theme(digitv2.lightTheme.text-disabled);
      }

      pointer-events: none !important;
    }

    &:not(.preselected):not(.has-preselected).disabled{
      label {
        color: theme(digitv2.lightTheme.text-disabled);
      }
    }

    &.label-first{
      flex-direction: row-reverse;
    }

  }

  .radio-option-container label:only-child {
    align-items: flex-start;
  }

  .digit-radio-btn {
    @apply opacity-0 absolute cursor-pointer h-6 w-6;
    margin: theme(digitv2.spacers.spacer0);
  }

  .digit-radio-btn-checkmark {
    @extend .light-input-border;
    @apply h-6 w-6 border border-input-border border-solid rounded-full block;
  }

  label {
    @extend .typography.body-s;
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.regular);
    line-height: theme(digitv2.lineHeight.lineheight2);
    margin-top: 0.065rem;

    @media (max-aspect-ratio: 9/16) {
      /* Media query for mobile */
      font-size: theme(digitv2.fontSize.body-s.mobile);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
      /* Media query for tablets */
      font-size: theme(digitv2.fontSize.body-s.tablet);
    }

    @media (min-aspect-ratio: 3/4) {
      /* Media query for desktop */
      font-size: theme(digitv2.fontSize.body-s.desktop);
    }
    color: theme(digitv2.lightTheme.text-primary);
    overflow-wrap: anywhere;
  }

  .digit-radio-btn-checkmark:after {
    content: "";
  }

  .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark {
    border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
  }

  .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark:after {
    @apply flex h-3 w-3 rounded-full absolute items-center;
    left: 50%;
    transform: translate(-50%);
    top: 25%;
    background-color: theme(digitv2.lightTheme.primary-1);
  }

  .preselected .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark {
    border: 0.125rem solid theme(digitv2.lightTheme.generic-divider);
  }

  .preselected .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark:after {
    @apply flex h-3 w-3 rounded-full absolute items-center;
    left: 50%;
    transform: translate(-50%);
    top: 25%;
    background-color: theme(digitv2.lightTheme.text-disabled);
  }
}

.digit-reverse-radio-selection-wrapper {
  div {
    @apply flex flex-row-reverse place-content-between items-center;
  }
}