@import '../../assets/scss/components/radio/variables';

.st-radio {
  $root: &;

  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  cursor: pointer;

  &__input {
    position: relative;
  }

  &__inner {
    box-sizing: border-box;
    width: $st-radio-inner-size;
    height: $st-radio-inner-size;
    background-color: $st-radio-inner-background;
    border: $st-radio-inner-border;
    border-radius: 100%;
    transition: $st-radio-inner-transition;
  }

  &__original-input {
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    margin: 0;
    outline: none;
    opacity: 0;
  }

  &__label {
    padding-left: $st-radio-label-padding;
    font-size: $st-radio-label-font-size;
  }

  & + & {
    margin-left: $st-radio-group-margin;
  }

  &--hovered:not(&--disabled):not(&--selected):not(&--readonly) {
    #{$root}__inner {
      border: $st-radio-inner-hover-border;
    }
  }

  &--selected {
    #{$root}__inner {
      border: $st-radio-inner-selected-border;
    }
  }

  &--disabled {
    cursor: not-allowed;
    opacity: $st-radio-disabled-opacity;
  }

  &--readonly {
    cursor: default;
  }
}