/*
 * Copyright 2026 Element Creations Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.scrollbar {
    overflow-x: hidden;
    overflow-y: auto;
    overflow-y: overlay; /* where supported */
    -ms-overflow-style: -ms-autohiding-scrollbar;

    &::-webkit-scrollbar {
        background-color: transparent;
        width: 6px;
        height: 6px;
    }

    &::-webkit-scrollbar-thumb {
        background-color: transparent;
    }

    scrollbar-width: thin;
    scrollbar-color: transparent transparent;

    > * {
        /* also set on first level children in case this scrollbar is used as container */
        scrollbar-width: thin;
    }
}

.scrollbar:hover {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;

    :global(.cpd-theme-dark) &,
    :global(.cpd-theme-dark-hc) & {
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background-color: rgba(0, 0, 0, 0.2);

        :global(.cpd-theme-dark) &,
        :global(.cpd-theme-dark-hc) & {
            background-color: rgba(255, 255, 255, 0.2);
        }
    }
}

@media (prefers-color-scheme: dark) {
    .scrollbar:hover {
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;

        :global(.cpd-theme-light) &,
        :global(.cpd-theme-light-hc) & {
            scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 3px;
            background-color: rgba(255, 255, 255, 0.2);

            :global(.cpd-theme-light) &,
            :global(.cpd-theme-light-hc) & {
                background-color: rgba(0, 0, 0, 0.2);
            }
        }
    }
}
