.radio-input-component {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.radio-input-component-radio-container {
    display: flex;
    flex-direction: row;
    position: relative;
    gap: 8px;
    flex-wrap: wrap;
}

.radio-input-component-input-container {
    position: relative;
}

/* No checked or disabled selection - default state */
.radio-input-component-input-container:not(:has(> input[checked], > input[disabled])):hover {
    cursor: pointer;
}

.radio-input-component-input-container:not(:has(> input[checked], > input[disabled])):hover .radio-input-component-label {
    color: var(--color-text-accent);
}

.radio-input-component-input-container:not(:has(> input[checked], > input[disabled])):hover .radio-input-component-input {
    border: var(--border-outline-highlight);
    background-color: var(--color-highlight);
    box-shadow: var(--shadow-highlight);
}

/* Has checked selection */
.radio-input-component-input-container:has(> input[checked]) {
    cursor: pointer;
}

.radio-input-component-input-container:has(> input[checked]) .radio-input-component-label {
    color: var(--color-highlight);
}

.radio-input-component-input-container:has(> input[checked]) .radio-input-component-input {
    border: var(--border-outline-highlight);
    box-shadow: var(--shadow-highlight);
}

/* Has disabled input */
.radio-input-component-input-container:has(> input[disabled]) .radio-input-component-input {
    background-color: var(--color-dark-background);
}

.radio-input-component-input {
    appearance: none;
    margin: 0;
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: var(--border-outline);
    border-radius: 8px;
    gap: 16px;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    background-color: var(--color-light-background);
    box-shadow: var(--shadow-small);
    transition-property: color, border, background-color, box-shadow;
    transition-timing-function: var(--transition-timing-function);
    transition-duration: var(--transition-duration);
}

.radio-input-component-message {
    display: flex;
    align-items: center;
    gap: 8px;
    transition-property: color;
    transition-timing-function: var(--transition-timing-function);
    transition-duration: var(--transition-duration);
}

.radio-input-component-label {
    position: relative;
    display: flex;
    height: 40px;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 8px;
    gap: 16px;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    transition-property: color;
    transition-timing-function: var(--transition-timing-function);
    transition-duration: var(--transition-duration);
}

/* Default variant */
.radio-input-component.variant-default .radio-input-component-message {
    color: var(--color-text)
}

/* Error variant */
.radio-input-component.variant-error label {
    color: var(--color-error);
}

.radio-input-component.variant-error .radio-input-component-message {
    color: var(--color-error)
}