.modal {
    background-color: var(--color-1);
    border-radius: var(--radius-l);
    padding: var(--modal-padding);
    position: relative;
    width: var(--box-size)
}


html,
.custom-scrollbar {
    --scroll-thumb-background: var(--color-10);
    --scroll-thumb-background-hover: var(--scroll-thumb-background);
    --scrollbar-background: var(--color-1);
    --scrollbar-width-firefox: thin;
    --scrollbar-width-chromium: 8px;
    scrollbar-color: var(--scroll-thumb-background) var(--scrollbar-background);
    scrollbar-width: var(--scrollbar-width-firefox)
}

html::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar {
    background: var(--scrollbar-background);
    width: var(--scrollbar-width-chromium);
    height: var(--scrollbar-width-chromium)
}

html::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb-background);
    border: solid 1px var(--scroll-thumb-background)
}

html::-webkit-scrollbar-thumb:hover,
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-background-hover)
}