@import '../../../scss/styles.scss';

.radio-input {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: base(0.1) 0;

  input[type='radio'] {
    opacity: 0;
    width: 0;
    margin: 0;
  }

  input[type='radio']:focus + .radio-input__styled-radio {
    box-shadow: 0 0 3px 3px var(--theme-success-400);
  }

  &__styled-radio {
    @include formInput;
    width: $baseline;
    height: $baseline;
    position: relative;
    padding: 0;
    display: inline-block;
    border-radius: 50%;

    &:before {
      content: ' ';
      display: block;
      border-radius: 100%;
      background-color: var(--theme-elevation-800);
      width: calc(100% - 10px);
      height: calc(100% - 10px);
      border: 5px solid var(--theme-elevation-0);
      opacity: 0;
    }
  }

  [dir='rtl'] &__label {
    margin-left: 0;
    margin-right: base(0.5);
  }

  &__label {
    margin-left: base(0.5);
  }

  &--is-selected {
    .radio-input {
      &__styled-radio {
        &:before {
          opacity: 1;
        }
      }
    }
  }

  &:not(&--is-selected) {
    &:hover {
      .radio-input {
        &__styled-radio {
          border-color: var(--theme-elevation-250);

          &:before {
            opacity: 0.2;
          }
        }
      }
    }
  }
}

.radio-group--read-only {
  .radio-input {
    cursor: default;

    &__label {
      color: var(--theme-elevation-800);
    }

    &--is-selected {
      .radio-input__styled-radio {
        &:before {
          background-color: var(--theme-elevation-800);
        }
      }
    }

    &:not(.radio-input--is-selected) {
      &:hover {
        .radio-input__styled-radio {
          &:before {
            opacity: 0;
          }
        }
      }
    }
  }
}
