@use '../../../../../styles/base/mixin' as mixins;

$multi-selector: (
    host: (
        width: 20rem,
        height: 30rem,
        padding: 1rem 0 1rem 1rem,
        box-shadow: 0 0.5rem 1rem 0 var(--clr-black-60),
        border-radius: 0.375rem,
        background-color: var(--clr-white-100),
    ),
    header: (
        padding: 0 1rem 0 0,
    ),
    header-simple: (
        padding: 0 1rem 1rem 0,
    ),
    header-controls-item-icon: (
        margin-left: 0.5rem,
        color: var(--clr-black-40),
    ),
    header-controls-item-info: (
        margin-left: 0.5rem,
        font-size: 0.875rem,
        color: var(--clr-black-60),
    ),
    header-controls-item-first: (
        padding: 1rem 0 0 0.5rem,
    ),
    header-controls-item-last: (
        padding: 1rem 0 0 0,
        border-bottom: solid 1px var(--clr-gray-20),
    ),
    item-label-hover: (
        color: var(--clr-black-60),
    ),
    options-item-separated: (
        border-bottom: solid 1px var(--clr-gray-20),
    ),
    options-item-title: (
        max-width: 15rem,
    ),
    placeholder: (
        gap: 1rem,
        padding-right: 1rem,
    ),
    placeholder-icon: (
        size: 3rem,
        color: var(--clr-black-60),
    ),
    placeholder-title: (
        font-size: 1.5rem,
        color: var(--clr-black-60),
    ),
    footer: (
        padding: 1rem 1.5rem 0 0.5rem,
        gap: 0.5rem,
    ),
    footer-nav-action: (
        font-size: 0.875rem,
        color: var(--clr-black-60),
    ),
    footer-nav-action-hover: (
        color: var(--clr-black-100),
    ),
);

:host {
    @each $element, $elements in $multi-selector {
        @each $style-token, $value in $elements {
            #{mixins.generateCssVar('multi-selector', #{$element}, #{$style-token})}: #{$value};
        }
    }

    display: flex;
    flex-direction: column;
    width: var(--rt-multi-selector-host-width);
    height: var(--rt-multi-selector-host-height);
    padding: var(--rt-multi-selector-host-padding);
    box-shadow: var(--rt-multi-selector-host-box-shadow);
    border-radius: var(--rt-multi-selector-host-border-radius);
    background-color: var(--rt-multi-selector-host-background-color);

    &::ng-deep {
        // radiobutton
        mat-radio-button {
            .mdc-form-field {
                .mdc-label {
                    cursor: pointer;
                }

                &:hover .mdc-label {
                    color: var(--rt-multi-selector-item-label-hover-color);
                }
            }
        }

        // checkbox
        mat-checkbox {
            width: fit-content;

            .mdc-form-field {
                &:hover .mdc-label {
                    color: var(--rt-multi-selector-item-label-hover-color);
                }
            }
        }
    }

    .rtui-multi-selector-header {
        display: flex;
        flex-direction: column;
        padding: var(--rt-multi-selector-header-padding);

        &--simple {
            padding: var(--rt-multi-selector-header-simple-padding);
        }

        &__controls {
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            &-item {
                &--first {
                    display: flex;
                    flex-direction: row;
                    padding: var(--rt-multi-selector-header-controls-item-first-padding);
                }

                &--last {
                    width: 100%;
                    padding: var(--rt-multi-selector-header-controls-item-last-padding);
                    border-bottom: var(--rt-multi-selector-header-controls-item-last-border-bottom);
                }

                &-icon {
                    margin-left: var(--rt-multi-selector-header-controls-item-icon-margin-left);
                    color: var(--rt-multi-selector-header-controls-item-icon-color);
                }

                &-info {
                    margin-left: var(--rt-multi-selector-header-controls-item-info-margin-left);
                    font-size: var(--rt-multi-selector-header-controls-item-info-font-size);
                    color: var(--rt-multi-selector-header-controls-item-info-color);
                }
            }
        }
    }

    .rtui-multi-selector-options {
        display: flex;
        flex-direction: column;
        flex: 1 1 100%;
        height: 100%;
        width: 100%;
        overflow-y: auto;

        &__item {
            &-title {
                width: 100%;
                max-width: var(--rt-multi-selector-options-item-title-max-width);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            &--separated {
                border-bottom: var(--rt-multi-selector-options-item-separated-border-bottom);
            }
        }

        &__loader {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .rtui-multi-selector-placeholder {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1 1 100%;
        gap: var(--rt-multi-selector-placeholder-gap);
        padding-right: var(--rt-multi-selector-placeholder-padding-right);
        overflow-y: auto;

        &__icon {
            width: var(--rt-multi-selector-placeholder-icon-size);
            height: var(--rt-multi-selector-placeholder-icon-size);
            font-size: var(--rt-multi-selector-placeholder-icon-size);
            color: var(--rt-multi-selector-placeholder-icon-color);
        }

        &__title {
            font-size: var(--rt-multi-selector-placeholder-title-font-size);
            color: var(--rt-multi-selector-placeholder-title-color);
        }
    }

    .rtui-multi-selector-footer {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: var(--rt-multi-selector-footer-padding);
        gap: var(--rt-multi-selector-footer-gap);

        &--full {
            justify-content: space-between;
        }

        &__nav-action {
            text-decoration: none;
            font-size: var(--rt-multi-selector-footer-nav-action-font-size);
            color: var(--rt-multi-selector-footer-nav-action-color);

            &:hover {
                color: var(--rt-multi-selector-footer-nav-action-hover-color);
            }
        }

        &__base-actions {
            display: flex;
            gap: var(--rt-multi-selector-footer-gap);
        }
    }
}