.list-box {
    --background-color: var(--white);
    --padding: 8px 0px;

    z-index: 1000;
    min-width: 100%;
    max-height: $list-box-max-height;
    margin: 0;
    padding: var(--padding);
    overflow-y: auto;
    background-color: var(--background-color);
    border: $default-border;
    border-radius: 8px;
    box-shadow: $list-box-box-shadow;

    @include slim-scroll(var(--grey-20), var(--grey-50));

    &.list-box-with-footer {
        --padding: 8px 0 0 0;

        border-bottom: none;
        border-radius: 8px 8px 0 0;
        box-shadow: none;
    }
}

.item-box {
    --background-color: var(--white);
    --color: var(--default-text-color);
    --cursor: pointer;
    --height: 40px;
    --padding: 8px 16px;

    gap: 9px;
    min-width: 0;
    height: var(--height);
    padding: var(--padding);
    color: var(--color);
    list-style: none;
    background-color: var(--background-color);
    outline: none;
    cursor: var(--cursor);

    &:hover {
        --background-color: var(--grey-20);
    }

    &:focus,
    &.selected {
        --background-color: var(--digital-blue-10);
        --color: var(--digital-blue-80);

        border-top: 1px solid var(--digital-blue-20);
        border-bottom: 1px solid var(--digital-blue-20);
    }

    &.active:not(.selected) {
        --background-color: var(--grey-20);

        border-top: 1px solid var(--digital-blue-20);
        border-bottom: 1px solid var(--digital-blue-20);
    }

    &.disabled {
        --color: var(--grey-60);
        --cursor: default;

        &:hover {
            --background-color: var(--white);
        }
    }

    &.multi-line {
        white-space: normal;
        word-break: break-word;
    }

    &.divider {
        --height: 1px;
        --padding: 0;
        --cursor: default;
        --background-color: var(--grey-50);

        margin: $item-box-vertical-spacing 0;
    }

    .prepend,
    .append {
        --color: var(--grey-50);

        &-red {
            --color: var(--critical-70);
        }
    }
}

.item-box-loading {
    height: 14px;
    background-color: var(--grey-40);
    border-radius: 8px;
}

.select-footer {
    @extend .body-s-book;
    @extend %light;

    display: flex;
    gap: 9px;
    align-content: center;
    padding: $item-box-vertical-spacing $item-box-horizontal-spacing;
    overflow: hidden;
    color: var(--grey-100);
    white-space: nowrap;
    text-overflow: ellipsis;
    list-style: none;
    background-color: var(--white);
    border: 1px solid var(--grey-40);
    border-radius: 0 0 8px 8px;
    box-shadow: $list-box-box-shadow;
    fill: var(--grey-100);
}