@import "theme.scss";

/* channel feed custom scrollbar */
/* Note: Using this hack... https://stackoverflow.com/questions/29866759/how-do-i-add-a-margin-to-a-css-webkit-scrollbar */
#channel-feed-content-wrapper::-webkit-scrollbar {
    width: 16px;
}

#channel-feed-content-wrapper::-webkit-scrollbar-track {
    visibility: visible; /* always visible, does not disappear when not hovered over */
    box-shadow: 0 0 12px 12px $background-secondary inset;
    border: 4px solid transparent;
    border-radius: 12px;
}

#channel-feed-content-wrapper::-webkit-scrollbar-thumb {
    visibility: visible; /* always visible, does not disappear when not hovered over */
    box-shadow: 0 0 12px 12px $background-tertiary inset;
    border: 4px solid transparent;
    border-radius: 12px;
}

#channel-feed-content-wrapper::-webkit-scrollbar-button {
    display: none;
}

/* General custom scrollbar (much thinner than channel feed) */
/* Note: Using this hack... https://stackoverflow.com/questions/29866759/how-do-i-add-a-margin-to-a-css-webkit-scrollbar */

:not(:hover)::-webkit-scrollbar-thumb {
    visibility: hidden;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    box-shadow: 0 0 2px 2px $background-tertiary inset;
    border: 2px solid transparent;
    border-radius: 4px;
}

::-webkit-scrollbar-button {
    display: none;
}