@layer atoms {
  /* stylelint-disable no-descending-specificity -- complex component with many state combinations */
  .mobius-radio-group {
    box-sizing: border-box;
    width: 100%;

    &.--is-horizontal .mobius-radio__label:not(:last-child) {
      margin-right: var(--radio-gap);
    }

    &.--is-vertical .mobius-radio__label:not(:last-child) {
      margin-bottom: var(--radio-gap);
    }

    &:where(.--is-optional) > :where(.mobius-label)::after {
      content: " (optional)";
    }
  }

  .mobius-radio__wrapper {
    display: flex;

    &.--is-horizontal {
      flex-direction: row;
    }

    &.--is-vertical {
      flex-direction: column;
    }
  }

  .mobius-radio__input {
    position: relative;
    align-self: center;
    margin: 0 var(--radio-label-gap) 0 0;
    padding: var(--size-xs);
    width: var(--radio-size);
    height: var(--radio-size);
    border: var(--radio-border-width) solid var(--color-primary-light);
    border-radius: 50%;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;

    /* Overwrite browser default */
    &:focus-visible {
      outline-color: var(--color-primary);
      outline-offset: 0;
    }

    &::after {
      position: absolute;
      content: "";
      display: block;
      width: var(--radio-inner-size);
      height: var(--radio-inner-size);
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    &:checked::after {
      background-color: var(--color-primary);
    }

    &:disabled {
      border-color: var(--radio-input-disabled-border-color);

      &:checked::after {
        background-color: var(--radio-input-disabled-inner-color);
      }
    }

    &.--is-multiline {
      align-self: flex-start;
      margin-top: var(--size-xxs);
      margin-right: var(--radio-label-gap);
    }
  }

  .mobius-radio__label {
    display: flex;
    align-items: var(--radio-label-align-items);
    box-sizing: border-box;
    width: 100%;
    padding: var(--radio-label-padding);
    font-family: var(--font-family);
    font-size: var(--font-size-regular);
    font-weight: var(--font-weight-normal);
    border: var(--radio-label-border);
    border-radius: var(--radius-1);
    color: var(--color-text);
    outline: 0;
    position: relative;
    cursor: pointer;
    background-color: var(--radio-label-background);
    overflow-wrap: break-word;

    /* Disabled */
    &.--is-disabled {
      background-color: var(--radio-label-background-disabled);
      border-color: var(--radio-label-disabled-border-color);
      color: var(--radio-label-disabled-text-color);
      cursor: not-allowed;

      &.--is-selected {
        border-color: var(--radio-label-disabled-selected-border-color);
      }
    }

    /* Selected  */
    &.--is-selected:not(.mobius-radio-group.--is-invalid &):not(
        .--is-disabled
      ) {
      border-color: var(--color-primary-light);

      & .mobius-radio__input {
        border-color: var(--color-primary-light);

        &:checked::after {
          background-color: var(--color-primary-light);
        }
      }
    }

    /* Hovered  */
    &:hover:not(.--is-disabled):not(.mobius-radio-group.--is-invalid &) {
      border-color: var(--color-primary);
      background-color: var(--radio-label-background-hover);

      & .mobius-radio__input {
        border-color: var(--color-primary);

        &:checked::after {
          background-color: var(--color-primary);
        }
      }
    }

    /* Focused */
    &:has(:focus-visible):not(.--is-disabled) {
      box-shadow: var(--radio-box-shadow);

      &:not(.mobius-radio-group.--is-invalid &) {
        border-color: var(--color-primary);
        background-color: var(--radio-label-background-focus);

        & .mobius-radio__input {
          border-color: var(--color-primary);

          &:checked::after {
            background-color: var(--color-primary);
          }
        }
      }
    }

    /* Multiline */
    &.--is-multiline {
      width: 100%;
    }

    /* Invalid */
    .mobius-radio-group.--is-invalid &:not(.--is-disabled) {
      border-color: var(--radio-label-invalid-border-color);
      color: var(--radio-label-invalid-text-color);

      &:hover,
      &:focus-within {
        border-color: var(--radio-label-invalid-border-color);
        background-color: var(--radio-label-background-invalid);
      }

      & .mobius-radio__input {
        border-color: var(--radio-input-invalid-border-color);

        &:checked::after {
          background-color: var(--radio-input-invalid-inner-color);
        }
      }
    }
  }

  .mobius-radio__content {
    box-sizing: border-box;
    flex: 1; /* Stretch to fill remaining space */
    font-size: var(--radio-content-font-size);
    color: var(--radio-content-color);
    line-height: var(--radio-content-line-height);
  }

  .mobius-radio__content--multiline {
    flex: 1; /* Stretch to fill remaining space */
    font-size: var(--radio-content-font-size);
    color: var(--radio-content-color);
    line-height: var(--radio-content-line-height);
  }

  .mobius-radio__content-first-line {
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--radio-first-line-margin-bottom);
    padding-top: var(--radio-first-line-padding-top);
  }

  .mobius-radio__extra-content {
    color: var(--radio-extra-content-color);
  }

  .mobius-radio__label.--has-icon-first .mobius-radio__content {
    display: grid;
    align-items: center;
    grid-template-columns: var(--size-md) 1fr;
    gap: var(--size-xs);
  }

  .mobius-radio__content .mobius-icon {
    color: var(--radio-icon-color);
  }
}
