@use "../../../Assets/sass/devtoys" as *;

.list-box-item {
    @include flex( $align: center );
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    margin: 3px;
    padding-inline: 12px;
    border-radius: var(--list-box-item-radius);
    outline: none;
    background-color: var(--list-box-item-background);
    color: var(--list-box-item-foreground);
    text-decoration: none;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    min-block-size: 34px;
    text-decoration: none;
    pointer-events: auto;

    &::before {
        content: "";
        position: absolute;
        border-radius: 3px;
        background-color: var(--list-box-item-selection-indicator);
        transition: transform 167ms cubic-bezier(0, 0, 0, 1);
        opacity: 0;
        inset-inline-start: 0;
        inline-size: 3px;
        min-block-size: 16px;
        transform: scaleY(0);
    }

    &.selected::before {
        transform: scaleY(1);
        opacity: 1;
    }

    &:hover {
        background-color: var(--list-box-item-background-pointer-over);
    }

    &.selected {
        background-color: var(--list-box-item-background-selected);
        color: var(--list-box-item-foreground-selected) !important;

        * {
            color: var(--list-box-item-foreground-selected) !important;
        }
    }

    &:active {
        background-color: var(--list-box-item-background-pressed);
        color: var(--list-box-item-foreground-pressed);

        &::before {
            transform: scaleY(0.625);
        }
    }

    &.disabled {
        background-color: var(--list-box-item-background-disabled);
        color: var(--list-box-item-foreground-disabled);
        pointer-events: none;

        &.selected {
            background-color: var(--list-box-item-background-selected-disabled);

            &::before {
                background-color: var(--accent-disabled);
            }
        }
    }

    > :global(svg) {
        inline-size: 16px;
        min-block-size: auto;
        fill: currentColor;
        margin-inline-end: 16px;
    }
}

// Compact mode
div[data-compactmode] {
    .list-box-item {
        min-block-size: 24px;
    }
}
