@use "../../core/size";
@use "../../core/mixins/breakpoints" as bp;
@use "../../core/mixins/forcedcolors";
@use "variables" as *;

$chip-border-radius: 20px;
$chip-border-width: var(--f-border-width-medium);

@mixin chip($group, $item, $type) {
    .#{$group}--chip {
        .#{$group}__label {
            margin-bottom: size.$margin-025;
        }

        .#{$group}__content {
            margin: -0.25rem;
        }

        .#{$item} {
            margin: 0;
            padding: size.$padding-025;

            &.disabled {
                .#{$item}__label {
                    background: $chip-color-background-disabled;
                    border-color: $chip-color-border-disabled;
                    color: $chip-color-text-disabled;

                    @media (forced-colors: active) {
                        color: GrayText;
                    }
                }
            }
        }

        .#{$item}__label {
            width: 100%;
            display: flex;
            align-items: center;
            cursor: pointer;
            font-weight: var(--f-font-weight-medium);
            padding: size.$padding-050 size.$padding-100;
            border-radius: $chip-border-radius;
            border: $chip-border-width solid $chip-color-border-default;
            background-color: $chip-color-background-default;
            color: $chip-color-text-default;
            justify-content: center;
            max-width: 400px;
            user-select: none;

            &::before,
            &::after {
                display: none;
            }

            svg {
                margin-right: size.$margin-050;
            }
        }

        @media (hover: hover) {
            .#{$item}__label:hover {
                border-color: $chip-color-border-hover;
                background-color: $chip-color-background-hover;
                color: $chip-color-text-hover;

                @include forcedcolors.hover-indicator(border, $chip-border-width);
            }
        }

        input[type="#{$type}"]:checked + .#{$item}__label {
            background: $chip-color-background-selected;
            border-color: $chip-color-border-selected;
            color: $chip-color-text-selected;

            @include forcedcolors.selected-indicator;
        }

        input[type="#{$type}"]:focus-visible + label.#{$item}__label {
            border-radius: $chip-border-radius;
        }
    }

    .#{$group}--chip.#{$group}--horizontal {
        .#{$group}__content {
            flex-flow: row wrap;

            .#{$item} {
                width: fit-content;
                margin-bottom: 0;
            }

            @include bp.breakpoint-down(sm) {
                flex-flow: row wrap;

                .#{$item} {
                    margin-bottom: 0;
                }
            }
        }
    }
}

@include chip("radio-button-group", "radio-button", "radio");
@include chip("checkbox-group", "checkbox", "checkbox");