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

@layer payload-default {
  .radio-group {
    .tooltip:not([aria-hidden='true']) {
      right: auto;
      position: static;
      margin-bottom: 0.2em;
      max-width: fit-content;
    }

    &--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;

      &:hover {
        border-color: var(--theme-elevation-50);
      }

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

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

      &: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;
        }
      }
    }
  }
}