@charset "utf-8";
@import (optional, reference) "var.less";
/*Grade*/
._grade {
    --_width-grade: var(--_w-list);
    position: relative;
    &>[rep=host] {
        .v3-flex-center(inline-flex);
    }
    &>[rep=host] [rep=label]{
        position: relative;
    }
    &>[rep=host] [rep=arrow] {
        color: var(--_c-ignore);
        font-family: var(--_ff-icon);
        font-size: var(--_fs-arrow);
        margin-left: var(--_sz-min);
        .v3-trans-all();
        &:before {
            content: 'down';
        }
    }
    &:where(:not([expanded]))>[rep=host] {
        [rep=label]:after {
            .v3-lamp;
        }
        [rep=arrow] {
            margin-left: var(--_sz-min);
        }
    }
    &:where([expanded])>[rep=host] {
        [rep=arrow] {
            order: -10;
            margin-right: var(--_sz-min);
        }
    }
    &>._grade-wrap {
        box-sizing: border-box;
    }
    &:where(:not([expanded]))>._grade-wrap {
        background-color: var(--_c-stage);
        transform: translatex(-50%);
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        z-index: 3;
    }
    &[placement="right"]:where(:not([expanded])) ._grade-wrap {
        top: 0;
        left: auto;
        right: calc(-1*var(--_width-grade) - var(--_sz-space); );
        transform: none;
    }
    &[placement="right"]:where(:not([expanded])) ._grade-wrap:before {
        content: '';
        width: 1.0rem;
        height: var(--_sz-input);
        position: absolute;
        left: -1.0rem;
        top: 0;
    }
    &[placement="bottom-start"]:where(:not([expanded])) ._grade-wrap {
        transform: none;
        left: 0;
    }
    &[placement="bottom-end"]:where(:not([expanded])) ._grade-wrap {
        transform: none;
        left: auto;
        right: 0;
    }
    &:where(:not([expanded])) {
        ._grade-wrap,
        ul._grade-wrap ul {
            width: var(--_width-grade);
            box-sizing: border-box;
            border: 1px solid var(--_c-text-bd);
            border-radius: @radius;
        }
        ._grade-wrap:where(:not(ul)) {
            --_width-grade: var(--_w-drawer);
        }
        ul._grade-wrap li {
            position: relative;
            border-bottom: 1px solid var(--_c-text-bd);
        }
        ul._grade-wrap li:last-child,
        ul._grade-wrap ul li:last-child {
            border-width: 0;
        }
        ul._grade-wrap li ul {
            box-sizing: border-box;
            background-color: var(--_c-stage);
            -webkit-transform: translate(100%, 0%);
            transform: translate(100%, 0%);
            position: absolute;
            width: 100%;
            top: -0.1rem;
            right: 0;
            display: none;
        }
    }
    &:where([expanded]) li {
        margin-left: 2em;
    }
    ul._grade-wrap [rep=head] {
        line-height: var(--_sz-brief);
        min-height: var(--_sz-input);
        padding: calc((var(--_sz-input) - var(--_sz-brief))/2) var(--_p);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        cursor: pointer;
        .v3-trans-all(var(--_dur-1));
    }
    ul._grade-wrap li [rep=arrow] {
        font-family: var(--_ff-icon);
        font-size: var(--_fs-arrow);
        color: var(--_c-ignore);
        height: 1em;
        width: 1em;
        line-height: 1em;
        text-align: center;
        .v3-trans-all;
    }
    &:where(:not([expanded])) ul._grade-wrap li [rep=arrow] {
        margin-right: -1rem;
        margin-left: calc(-1em + 1rem);
        &:before {
            content: 'right';
        }
    }
    &:where([expanded]) {
        ul._grade-wrap [rep=head] {
            border-radius: @radius;
            display: inline-flex;
            [rep=label] {
                width: auto;
            }
        }
        ul._grade-wrap li [rep=arrow] {
            margin-left: -1.4rem;
            margin-right: calc(1.4rem - 1em);
            order: -10;
            &:before {
                content: 'down';
            }
        }
    }
    ul._grade-wrap [rep=label] {
        color: var(--_c-text);
        box-sizing: border-box;
        flex: auto;
        width: 0;
    }
    ul._grade-wrap [rep=icon],
    ul._grade-wrap [rep=disk],
    ul._grade-wrap [rep=cube] {
        margin-right: var(--_sz-min);
    }
    ul._grade-wrap [rep=disk],
    ul._grade-wrap [rep=cube] {
        height: var(--_sz-list);
        width: var(--_sz-list);
        object-fit: cover;
    }
    ul._grade-wrap [rep=disk] {
        border-radius: 100%;
    }
    ul._grade-wrap [rep=cube] {
        border-radius: @radius;
    }
    &:where(:not([expanded])):hover {
        &>[rep=host] [rep=arrow] {
            rotate: 180deg;
        }
        &>._grade-wrap {
            display: block;
        }
    }
    &:where(:not([expanded])) {
        ul._grade-wrap li:hover>[rep=head]+ul {
            display: block;
        }
        ul._grade-wrap li:hover>[rep=head] [rep=arrow] {
            rotate: 180deg;
        }
    }
    &>[rep=host][selected] {
        color: var(--_c-prim);
    }
    &:where(:not([expanded]))>[rep=host][selected] [rep=label]:after {
        transform: translate(-50%, 0) scaleX(1);
    }
    ul._grade-wrap [rep=head]:where(:not([selected], [disabled])):hover {
        color: var(--_c-prim);
        background-color: var(--_c-prim-bg);
        [rep=label] {
            color: var(--_c-prim);
        }
    }
    ul._grade-wrap [rep=head][selected] [rep=arrow] {
        color: rgba(255, 255, 255, var(--_o-active));
    }
    ul._grade-wrap [rep=head][selected],
    ul._grade-wrap [rep=head][selected]:hover {
        color: var(--_c-stage);
        background-color: var(--_c-prim);
        [rep=label] {
            color: var(--_c-stage);
        }
    }
    ul._grade-wrap [rep=head][disabled] {
        color: var(--_c-ignore);
        [rep=label] {
            color: var(--_c-ignore);
        }
    }
}
