radiobutton.scss

// Checkbox need to be imported before, we won't double it here currently

.#{$ns}-control {
    --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
    --#{$eccgui}-a11y-outline-width: 2px;
    --#{$eccgui}-a11y-outline-offset: 0;

    &.#{$ns}-radio {
        input ~ .#{$ns}-control-indicator,
        input:checked ~ .#{$ns}-control-indicator {
            box-shadow: none;
        }

        input:focus ~ .#{$ns}-control-indicator {
            @extend .focus-by-keyboard;

            animation: none;
        }

        input:disabled ~ .#{$ns}-control-indicator,
        input:disabled:checked ~ .#{$ns}-control-indicator {
            background-color: $eccgui-color-checkbox-background;
            opacity: 1;

            &::before {
                opacity: 0.25;
            }
        }

        input ~ .#{$ns}-control-indicator::before {
            background-image: url("~@carbon/icons/svg/32/radio-button.svg");
        }
        input:checked ~ .#{$ns}-control-indicator::before {
            background-image: url("~@carbon/icons/svg/32/radio-button--checked.svg");
        }
    }
}

.#{$eccgui}-radiobutton--hidden-indicator {
    &:not(.#{$ns}-align-right) {
        padding-inline-start: 0;
    }
    &:not(.#{$ns}-align-left) {
        padding-inline-end: 0;
    }

    input ~ .#{$ns}-control-indicator {
        visibility: hidden;
    }
}