@use '@mskcc/themes/tokens' as tk;
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;
@use '@carbon/styles/scss/components/radio-button';

@mixin msk-radio-button {
    @include radio-button.radio-button;

    .#{$prefix}--radio-button__appearance {
        --#{$prefix}-icon-primary: #{tk.$msk--color-border-input};

        height: m.msk-rem(16px);
        width: m.msk-rem(16px);
    }

    .#{$prefix}--radio-button__label {
        padding-right: 0.25rem;
        padding-top: 1px;
    }

    .#{$prefix}--radio-button__label-text {
        @include m.msk-input-label-text;
    }

    // inner circle size
    .#{$prefix}--radio-button:checked
        + .#{$prefix}--radio-button__label
        .#{$prefix}--radio-button__appearance {
        &::before {
            --#{$prefix}-icon-primary: #{tk.$msk--color-bg-input-selected};

            transform: scale(0.75);
        }
    }

    // Hover state
    .#{$prefix}--radio-button:not(:disabled)
        + .#{$prefix}--radio-button__label {
        &:hover {
            background-color: tk.$msk--color-bg-input-item-hover;
            border-radius: m.msk-rem(4px);
        }
    }

    // Focus state
    .#{$prefix}--radio-button:focus
        + .#{$prefix}--radio-button__label
        .#{$prefix}--radio-button__appearance {
        --#{$prefix}-focus: transparent;

        outline: none;
    }

    .#{$prefix}--radio-button:not(:disabled):focus
        + .#{$prefix}--radio-button__label {
        @include m.msk-input-focus(true);
    }

    //----------------------------------------------
    // Invalid + warn
    // ---------------------------------------------

    .#{$prefix}--radio-button-group--invalid
        + .#{$prefix}--radio-button__validation-msg,
    .#{$prefix}--radio-button-group--warning
        + .#{$prefix}--radio-button__validation-msg {
        --cds-text-error: #{tk.$msk--color-content-error};

        color: tk.$msk--color-content-error;
    }

    .#{$prefix}--radio-button-group ~ .#{$prefix}--form__helper-text {
        margin-top: m.msk-rem(8px);
    }

    .#{$prefix}--radio-button-group--invalid
        + .#{$prefix}--radio-button__validation-msg
        .#{$prefix}--form-requirement,
    .#{$prefix}--radio-button-group--warning
        + .#{$prefix}--radio-button__validation-msg
        .#{$prefix}--form-requirement {
        margin-left: 0;
    }

    // error border color
    .#{$prefix}--radio-button-group--invalid
        .#{$prefix}--radio-button
        + .#{$prefix}--radio-button__label
        .#{$prefix}--radio-button__appearance {
        --cds-support-error: #{tk.$msk--color-content-error};
    }

    .#{$prefix}--radio-button__invalid-icon,
    .#{$prefix}--radio-button__invalid-icon--warning {
        --cds-support-error: #{tk.$msk--color-content-error};
        --cds-support-warning: #{tk.$msk--color-content-error};

        margin: 0 m.msk-rem(8px) 0 m.msk-rem(2px);
        color: tk.$msk--color-content-error;
    }

    //----------------------------------------------
    // Disabled
    // ---------------------------------------------
    .#{$prefix}--radio-button:disabled + .#{$prefix}--radio-button__label,
    .#{$prefix}--radio-button:disabled:checked
        + .#{$prefix}--radio-button__label {
        .#{$prefix}--radio-button__appearance {
            --#{$prefix}-icon-disabled: #{tk.$msk--color-border-disabled};

            background-color: tk.$msk--color-bg-disabled;
        }

        .#{$prefix}--radio-button__label-text {
            color: tk.$msk--color-content-disabled;
        }
    }

    //----------------------------------------------
    // Styling for difference sizes
    // ---------------------------------------------

    // Medium size
    .msk-radio-button-group--md {
        .#{$prefix}--radio-button__appearance {
            height: m.msk-rem(20px);
            width: m.msk-rem(20px);
        }

        .#{$prefix}--radio-button__label-text {
            padding-top: m.msk-rem(2px);
        }
        .#{$prefix}--radio-button-group--vertical
            .#{$prefix}--radio-button-wrapper:not(:last-of-type) {
            margin-bottom: m.msk-rem(12px);
        }
    }

    // Large size
    .msk-radio-button-group--lg {
        .#{$prefix}--radio-button__appearance {
            height: m.msk-rem(24px);
            width: m.msk-rem(24px);
        }

        .#{$prefix}--radio-button__label-text {
            padding-top: m.msk-rem(4px);
        }
        .#{$prefix}--radio-button-group--vertical
            .#{$prefix}--radio-button-wrapper:not(:last-of-type) {
            margin-bottom: m.msk-rem(16px);
        }
    }
}