@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

@import 'components/variables.css';
@import 'components/general.css';
@import 'components/button.css';
@import 'components/channel-tile.css';
@import 'components/container.css';
@import 'components/header.css';
@import 'components/navigation.css';
@import 'components/page.css';
@import 'components/video-card.css';
@import 'components/video-overlay.css';
@import 'components/subscriptions-list.css';
@import 'components/video-wall.css';
@import 'components/login-page.css';

.scroll-button {
    position: fixed;
    bottom: 20px;
    right: var(--scroll-button-right, 20px); /* Default to 20px if not set by JS */
    background-color: #282828;
    color: var(--button-color);
    border: 2px solid var(--button-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 999;
}

.scroll-button:hover {
    background-color: #1a1a1a; /* A slightly darker shade to prevent transparency */
}

.sort-control-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.sort-control {
    margin-left: 8px;
}

.sort-control button {
    margin-left: 8px;
}