@use 'sass:color';
@use '../../variables' as *;

$b: '.radio-list';

#{$b} {
    display: flex;

    &__item {
    }

    &__item-label {
        align-items: center;
        background-color: $radio-list-bg;
        border: $radio-list-border-width solid $radio-list-border-color;
        color: $radio-list-color;
        cursor: pointer;
        display: flex;
        height: 4px * 10;
        justify-content: center;
        padding-left: 4px * 4;
        padding-right: 4px * 4;
        text-align: center;
        text-decoration: none;
        transition-duration: var(--duration-micro-s);
        transition-property: background-color, border-color, color;
        transition-timing-function: var(--easing-standard);
        user-select: none;
        white-space: nowrap;

        @include font($radio-list-font);

        #{$b}__item:first-child & {
            border-bottom-left-radius: $radio-list-radius;
            border-top-left-radius: $radio-list-radius;
        }

        #{$b}__item:last-child & {
            border-bottom-right-radius: $radio-list-radius;
            border-top-right-radius: $radio-list-radius;
        }

        #{$b}__item:not(:last-child) & {
            border-right-style: none;
        }

        &:hover,
        &:focus-visible {
            background-color: $radio-list-active-bg;
            border-color: $radio-list-active-border-color;
            color: $radio-list-active-color;
        }

        :disabled + & {
            background-color: $radio-list-disabled-bg;
            border-color: $radio-list-disabled-border-color;
            color: $radio-list-disabled-color;
            cursor: default;
        }

        :checked + & {
            background-color: $radio-list-selected-bg;
            border-color: $radio-list-selected-border-color;
            color: $radio-list-selected-color;
            cursor: default;
        }

        :checked:disabled + & {
            background-color: $radio-list-selected-disabled-bg;
            color: $radio-list-selected-disabled-color;

            @if color.alpha($button-disabled-bg) == 1 {
                border-color: $radio-list-selected-disabled-border-color;
            } @else {
                border-color: transparent;
            }
        }
    }
}