/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--va-grey-lighter);
    border-radius: 3px;
}

::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
    background-color: var(--va-grey-dark);
}

/* Shoelace components */
sl-button-group {
    sl-button {
        &::part(base) {
            border-left: 1px solid var(--va-grey-dark);
        }
    }
}

sl-button {
    &::part(base) {
        font-size: 12px;
        line-height: 28px;
        letter-spacing: 2px;
        min-height: unset;
        outline: none;
        box-shadow: none;
    }

    &.selected::part(base) {
        background-color: var(--va-blue);
        color: var(--va-grey);
    }

    &[caret]::part(base) {
        padding-inline-end: 6px;
    }

    &[caret]::part(label) {
        padding: 0 4px 0 var(--sl-spacing-small);
    }
}

sl-input {
    &::part(base) {
        outline: none;
        box-shadow: none;
    }

    &::part(input) {
        letter-spacing: 2px;
        padding: 0 8px;
    }

    &::part(input)::placeholder {
        opacity: 1;
        color: var(--va-white-darkest);
        font-style: italic;
    }
}

sl-alert {
    .sl-toast-stack:has(> &) {
        z-index: 1100;
    }
}

sl-menu {
    border: none;
    top: 5px;
    padding: 0;

    &.right-menu {
        top: 0;
        left: 5px;
    }

    sl-menu-item {
        width: 100%;

        &::part(base) {
            font-size: 12px;
            line-height: 28px;
            letter-spacing: 2px;
            padding: 0 7px 0 10px;
        }

        &[checked]::part(base),
        &.selected::part(base) {
            background-color: var(--va-blue);
            color: var(--va-grey);
        }

        &[disabled]::part(base) {
            opacity: 1;
        }

        &::part(checked-icon), 
        &::part(submenu-icon) {
            display: none;
        }

        &.submenu-trigger {
            position: relative;
        }

        .menu-item-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            .item-label {
                text-align: left;
                flex-grow: 1;
            }

            .item-right-dock {
                margin-left: 4px;
            }
        }
    }

    sl-dropdown {
        display: block;
        width: 100%;
    }
}