@import "../Variables";
@import "Input";

.coveo-radio {
  position: relative;

  input[type='radio'] {
    // Hide the html radio under our custom one instead of using display:none to let the default keyboard navigation work.
    position: absolute;

    margin: 0;

    opacity: 0;

    & + label {
      position: relative;

      display: inline-block;
      height: $radio-button-option-height;
      padding-left: $radio-button-size + $checkbox-label-margin;

      color: $color-dark-grey;
      line-height: $radio-button-option-height;

      transition: 0.28s ease;

      cursor: pointer;
      user-select: none;

      &:before, &:after {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;

        width: $radio-button-size;
        height: $radio-button-size;

        content: '';

        border-radius: 50%;

        transition: 0.28s ease;
        box-sizing: inherit;
      }
    }

    &:focus + label:before {
      box-shadow: 0 0 0 8px $color-light-grey;
    }

    &:not(:checked) + label {
      &:before {
        border: 2px solid $color-teal;
      }

      &:after {
        z-index: -1;

        transform: scale(0);
      }
    }

    &:checked + label {
      &:before {
        border: 2px solid $color-green;
      }

      &:after {
        z-index: 0;

        background-color: $color-green;
        transform: scale(0.5);
      }
    }

    &:disabled {
      & + label {
        color: $color-grey;

        &:before {
          border-color: $color-grey;
        }
      }

      &:checked {
        & + label:after {
          background-color: $color-grey;
        }
      }
    }
  }
}

.coveo-radio + .coveo-radio {
  margin-top: 10px;
}

.radio-select {
  .radio-option + .radio-option {
    margin-top: 18px;
  }
}
