/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

:root {
    /* Basic Base */
    --el-tw-color-twitch: #5c16c5;
    --el-tw-color-partner: #A96FFF;
    --el-tw-color-glitch: #9146FF;
    --el-tw-color-hover : #772ce8;
    --el-tw-color-button : #9147ff;
    --el-tw-color-active : #a970ff;
    --el-tw-color-link: #bf94ff;
    --color-twitch-purple-1: #040109;
    --color-twitch-purple-2: #0d031c;
    --color-twitch-purple-3: #15052e;
    --color-twitch-purple-4: #24094e;
    --color-twitch-purple-5: #330c6e;
    --color-twitch-purple-6: #451093;
    --color-twitch-purple-7: #5c16c5;
    --color-twitch-purple-8: #772ce8;
    --color-twitch-purple-9: #9147ff;
    --color-twitch-purple-10: #a970ff;
    --color-twitch-purple-11: #bf94ff;
    --color-twitch-purple-12: #d1b3ff;
    --color-twitch-purple-13: #e3d1ff;
    --color-twitch-purple-14: #ede0ff;
    --color-twitch-purple-15: #f3ebff;
}

/* Sidebar Layout */
.el-twitch-sidebar .el-sidebar-live {
    margin: 0.5rem 0;
}

/* Sidebar Header */
.el-twitch-sidebar .el-live-header {
    color: #e0e0e0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: var(--el-tw-color-twitch);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.el-twitch-sidebar .el-header-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 1.5rem;
}

.el-twitch-sidebar .el-category-img {
    width: auto;
    height: 1.4rem;
}

.el-twitch-sidebar .el-button-reset {
    background-color: var(--el-tw-color-button);
    border-radius: 0.5rem;
    cursor: pointer;
    padding: 0.25rem;
    margin: 0.1rem;
}

.el-twitch-sidebar .el-button-toggle {
    background-color: var(--el-tw-color-button);
    border-radius: 0.5rem;
    cursor: pointer;
    padding: 0.25rem;
    margin: 0.1rem;
}

.el-twitch-sidebar .el-button-hidden {
    display: none;
}

.el-twitch-sidebar .el-button-toggle:hover {
    background-color: var(--el-tw-color-active);
    transition: background-color 0.5s cubic-bezier(0.05, 0, 0, 1);
}

/* Sidebar Section */
.el-twitch-sidebar .el-live-section {
    margin: 0.5rem 0;
}

/* Section Animation */
.el-twitch-sidebar .el-live-section.el-section-expanded {
    animation: elExpandAnimation 0.5s ease-in-out forwards;
}

.el-twitch-sidebar .el-live-section.el-section-collapsed {
    animation: elCollapseAnimation 0.5s ease-in-out forwards;
}

.el-twitch-sidebar .el-live-section.el-section-hidden{
    display: none;
}

/* Section Grid */
.el-twitch-sidebar .el-section-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(auto-fill, minmax(2rem, 1fr));
    gap: 5px;
    overflow: hidden;
    font-size: 0.8rem;
    line-height: 1rem;
    margin: 0.25rem 0;
}

.el-twitch-sidebar .el-list-article {
    grid-row: span 1;
    max-width: 100%;
    background-color: #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    padding: 0.1rem 0.25rem;
}

.el-twitch-sidebar .el-list-article:hover {
    color: #f0f0f0;
    background-color: var(--el-tw-color-button);
    transition: background-color 0.5s cubic-bezier(0.05, 0, 0, 1);
}

/* Article Animation */
.el-twitch-sidebar .el-list-article.el-article-expanded {
    animation: elExpandAnimation 0.5s ease-in-out forwards;
}

/* Article Empty & Error */
.el-twitch-sidebar .el-article-empty {
    text-align: center;
    padding: 1rem 0.5rem;
}

.el-twitch-sidebar .el-article-error {
    text-align: center;
    padding: 1rem 0.5rem;
}

/* Article Channel */
.el-twitch-sidebar .el-article-channel {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

/* Channel User */
.el-twitch-sidebar .el-channel-user {
    flex-grow: 0;
    flex-shrink: 0;
}

.el-twitch-sidebar .el-user-profile {
    height: 2rem;
}

/* Channel Card */
.el-twitch-sidebar .el-channel-card {
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    margin-left: 0.25rem;
}

/* Card Stream */
.el-twitch-sidebar .el-card-stream {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    overflow: hidden;
}

.el-twitch-sidebar .el-stream-title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.el-twitch-sidebar .el-stream-user {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.el-twitch-sidebar .el-user-type {
    width: 20px;
    height: 20px;
    margin: 0 0.1rem 0 0;
}

.el-twitch-sidebar .el-user-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.el-twitch-sidebar .el-stream-game {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card Status */
.el-twitch-sidebar .el-card-status {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.el-twitch-sidebar .el-status-indicator {
    width: 0.3rem;
    height: 0.3rem;
    background-color: var(--el-tw-color-twitch);
    border-radius: 50%;
    margin: 0.2rem;
}

.el-twitch-sidebar .el-status-count {
    display: flex;
    align-items: center;
}

.el-twitch-sidebar .el-status-language {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 3rem;
}

/* Section Bottom */
.el-twitch-sidebar .el-section-bottom{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    margin: 0.5rem;
}

.el-twitch-sidebar .el-bottom-more {
    font-weight: 600;
    color: #f0f0f0;
    background-color: var(--color-twitch-purple-10);
    border-radius: 8px;
    padding: 0.25rem 0.5rem;
    margin: 0.5rem 0;
    cursor:pointer;
}

.el-twitch-sidebar .el-bottom-more:hover {
    background-color: var(--el-tw-color-button);
}

/* Animation for expanding */
@keyframes elExpandAnimation {
    from {
        opacity: 0;
        /* height: 0; */
    }

    to {
        opacity: 1;
        /* height: 100%; */
    }
}

/* Animation for collapsing */
@keyframes elCollapseAnimation {
    from {
        opacity: 1;
        /* height: 100%; */
    }

    to {
        opacity: 0;
        /* height: 0; */
    }
}

/* Mobile Layout */
@media (hover:none) or (max-width: 768px) {
    /* Sidebar Mobile */
    .el-twitch-sidebar .el-sidebar-live {
        display: none;
    }
}