Dropdown

                @use "../abstracts/css-util";

.dropdown {
    min-width: 14rem;
    overflow: hidden;
    font-family: inherit;
    background: css-util.get-var(dropdown, background);
    border: css-util.get-var(dropdown, border-width) solid css-util.get-var(dropdown, border-color);
    border-radius: css-util.get-var(dropdown, radius);
    box-shadow: css-util.get-var(dropdown, shadow);
    z-index: css-util.get-var(dropdown, z-index);

    &-divider {
        margin: 0.4rem 0;
    }

    &-empty-state {
        padding: 3.2em 4.0rem;
        text-align: center;
    }

    &-heading {
        padding: css-util.get-var(dropdown-heading, padding);
        padding-bottom: 0;
        display: block;
        margin-bottom: 0.2rem;

        &+.dropdown-empty-state {
            padding: 0.8rem 2.4rem 1.6rem;
        }
    }

    &-menu {
        padding: css-util.get-var(dropdown-menu, padding-y) 0;

    }

    .fixed-height {
        max-height: 24rem;
        overflow-y: scroll;
    }

    &-item {
        display: flex;
        flex-direction: row;
        width: 100%;

        padding: css-util.get-var(dropdown-item, padding);
        white-space: nowrap;
        font-size: css-util.get-var(dropdown-item, text-size);
        font-weight: css-util.get-var(dropdown-item, text-weight);
        color: css-util.get-var(dropdown-item, text-color);
        line-height: 1.6rem;

        &:empty {
            height: 3.2rem;
        }

        &-prefix {
            width: 6rem;
            margin-right: css-util.get-var(dropdown-item-prefix, margin-right);
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        &:hover {
            background: css-util.get-var(dropdown-item, hover, background);
        }

        &:disabled {
            opacity: css-util.get-var(button, disabled, opacity);
            cursor: not-allowed;
            pointer-events: none;
        }
    }

    &-footer {
        border-top: css-util.get-var(dropdown-footer, border-width) solid css-util.get-var(dropdown-footer, border-color);
        padding: css-util.get-var(dropdown-footer, padding);
    }
}