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

.radio-group {
  &__error-wrap {
    position: relative;
  }

  &--layout-horizontal {
    ul {
      display: flex;
      flex-wrap: wrap;
    }

    li {
      flex-shrink: 0;
      [dir='ltr'] & {
        padding-right: $baseline;
      }
      [dir='rtl'] & {
        padding-left: $baseline;
      }
    }
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
}

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

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

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

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

html[data-theme='light'] {
  .radio-group {
    &.error {
      .radio-input__styled-radio {
        @include lightInputError;
      }
    }
  }
}

html[data-theme='dark'] {
  .radio-group {
    &.error {
      .radio-input__styled-radio {
        @include darkInputError;
      }
    }
  }
}
