/**********************************************************************************************************************/
/***                                              Toggle buttons styles                                             ***/
/**********************************************************************************************************************/
.btn-group {
    border-radius: 1rem !important;
    margin-bottom: 2rem;
    background-color: var(--background-content);
}
.btn-events {
    background-color: transparent !important;
    color: var(--foreground) !important;

    &.active {
        background-color: var(--color-yellow-500) !important;
        color: var(--color-slate-900) !important;
    }
    &:hover {
        color: inherit;
        background-color: var(--color-yellow-500);
    }
}
.multi-collapse {
    &.collapsing {
        transition: none;
    }
}
/**********************************************************************************************************************/

/**********************************************************************************************************************/
/***                                               Events content styles                                            ***/
/**********************************************************************************************************************/
#next-events,
#past-events {
    & .card {
        background-color: var(--background-content);
        border: 1px solid var(--color-slate-800);
    }
    & .badge {
        padding: 2px 8px !important;
        line-height: calc(1 / 0.75);
        background-color: var(--color-slate-700);
    }
    & .card-text {
        color: var(--color-slate-400);
        margin-bottom: 12px;
        &:last-of-type {
            margin-bottom: 0px;
        }
        & .winner {
            color: var(--color-yellow-500);
        }
    }
    & .btn-outline-results {
        background-color: transparent;
        color: var(--color-slate-400);
        border-color: var(--color-slate-400);
        &:hover {
            color: var(--accent-foreground);
            background-color: var(--color-slate-800);
        }
    }
}
#next-events {
    & .category {
        padding: 2px 8px !important;
        line-height: calc(1 / 0.75);
        background-color: var(--color-yellow-500);
        color: var(--color-slate-900);
    }
    & .status {
        padding: 2px 8px !important;
        line-height: calc(1 / 0.75);
        color: var(--color-slate-900);
        &.status-open {
            background-color: var(--color-green-500);
        }
        &.status-closed {
            background-color: var(--color-red-500);
        }
    }
    & .bi:not(.bi-people) {
        color: var(--color-yellow-500);
    }
    .detail {
        color: var(--color-slate-400);
    }
    & .attendants {
        color: var(--color-slate-400);
    }
    .btn-enroll {
        color: var(--color-slate-900) !important;
        background-color: var(--color-primary);
        font-size: 14px;

        &:hover {
            background-color: var(--color-yellow-600) !important;
        }
    }
}
/**********************************************************************************************************************/

/**********************************************************************************************************************/
/***                                                  Calendar styles                                               ***/
/**********************************************************************************************************************/
#month-agenda {
    background-color: var(--background-content);

    & h2 {
        font-size: 30px;
        margin-bottom: 32px;
    }
}
.calendar {
    background-color: var(--card-foreground);
    border: 1px solid var(--color-slate-800);
}
.calendar-card {
    background-color: var(--background-content);
    color: var(--color-slate-400);
    border-radius: 10px;
}
.event-date {
    padding: 12px;
    background-color: var(--color-yellow-500);
    color: var(--color-slate-900);
    border-radius: 10px;
    width: 60px;
}
.event-day {
    font-size: 1.5rem;
    line-height: calc(2 / 1.5);
}
.event-month {
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
}
.bi-trophy {
    font-size: 1.5rem !important;
    color: var(--color-yellow-500) !important;
}
/**********************************************************************************************************************/