/* =========================
   Hover behavior
   ========================= */

.calendarMonthEvent:hover .calendarMonthEvent__hover {
    opacity: 1;
    pointer-events: auto;
}

/* =========================
   Short view
   ========================= */

.calendarMonthEvent__short {
    display: flex;
    color: var(--cDark);
    font-size: var(--sSmallFont);
    line-height: var(--sSmallFont);
}

.calendarMonthEvent__shortLeft {
    width: 20px;
    border-right: 1px solid var(--cDark);
    flex-shrink: 0;
    font-weight: bold;
    font-family: var(--fAccent);
}

.calendarMonthEvent__shortRight {
    padding-left: 8px;
    flex-grow: 1;
}

/* =========================
   Time parts
   ========================= */

.calendarMonthEvent__timeStartColon {
    display: none;
}

.calendarMonthEvent__timeStartMinutes.noshow {
    display: none;
}

.calendarMonthEvent__timeTo {
    display: none;
    font-size: var(--sMicroFont);
    line-height: var(--sMicroFont);
    margin: 8px 0;
    text-transform: uppercase;
}

.calendarMonthEvent__timeEnd {
    display: none;
    margin: 0 -5px;
    font-size: var(--sBodySizeFont);
    line-height: var(--sBodySizeFont);
}

/* =========================
   Text
   ========================= */

.calendarMonthEvent__text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.calendarMonthEvent__description {
    display: none;
    margin-top: 5px;
    font-weight: bold;
    font-family: var(--fAccent);
}

.calendarMonthEvent__descriptionType {
    text-transform: uppercase;
}

/* =========================
   Hover box
   ========================= */

.calendarMonthEvent__hover {
    position: absolute;
    z-index: 150;
    bottom: 100%;
    left: 50%;
    width: 366px;
    transform: translateX(-50%);
    padding: 15px 20px 20px;
    border-radius: var(--sRadius);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
    background: var(--cWhite);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Hover down */
.calendarMonthEvent.hoverDown .calendarMonthEvent__hover {
    top: 100%;
    bottom: auto;
}

/* =========================
   Hover content
   ========================= */

.calendarMonthEvent__hoverMeta {
    font-size: var(--sMediumFont);
    line-height: var(--sBiggerFont);
    font-weight: bold;
    font-family: var(--fAccent);
}

.calendarMonthEvent__hoverMetaItem:not(:first-child) {
    margin-left: 20px;
}

.calendarMonthEvent__hoverMetaItem i {
    margin-right: 5px;
    vertical-align: -2px;
}

.calendarMonthEvent__hoverTitle {
    margin-top: 10px;
    font-weight: bold;
    font-size: var(--sLargerFont);
    line-height: var(--sLargerFont);
    font-family: var(--fAccent);
}

.calendarMonthEvent__hoverDescription {
    margin-top: 20px;
    font-size: var(--sMediumFont);
    line-height: var(--sBiggerFont);
}

.calendarMonthEvent__hoverDescriptionType {
    font-weight: bold;
    text-transform: uppercase;
    font-family: var(--fAccent);
}

.calendarMonthEvent__hoverButtonLine {
    margin-top: 20px;
}

.calendarMonthEvent__hoverButtonLine .luButton {
    width: 100%;
}

/* =========================
   Holiday modifier
   ========================= */

.calendarMonthEvent.holiday .calendarMonthEvent__short {
    color: var(--cTheme);
}

.calendarMonthEvent.holiday .calendarMonthEvent__shortLeft {
    border-right-color: var(--cTheme);
}

.calendarMonthEvent.holiday .calendarMonthEvent__description {
    display: block;
}

.calendarMonthEvent.holiday .calendarMonthEvent__descriptionLine {
    display: none;
}

.luButton {
    cursor: pointer;
    background: none;
    border: none;
    text-transform: uppercase;
    text-align: center;
    font-size: 1rem;
    letter-spacing: .2em;
    color: #fff;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    display: inline-block;
    font-weight: 700;
    border-radius: .16666rem;
    padding: 12px 40px;
    outline: none !important;
    background-color: #002d74;
    white-space: nowrap;
}

/* =========================================================
   MOBILE (md and down)
   ========================================================= */

@media (max-width: 768px) {

    .calendarMonthEvent__shortLeft {
        width: 56px;
        padding-right: 16px;
        text-align: center;
        color: var(--cTheme);
    }

    .calendarMonthEvent__timeStart {
        font-size: var(--sBodySizeFont);
        line-height: var(--sBodySizeFont);
        margin: 0 -5px;
    }

    .calendarMonthEvent__timeStartHour,
    .calendarMonthEvent__timeStartColon,
    .calendarMonthEvent__timeStartMinutes {
        display: inline;
    }

    .calendarMonthEvent__timeStartMinutes.noshow {
        display: inline;
    }

    .calendarMonthEvent__timeTo {
        display: block;
    }

    .calendarMonthEvent__timeEnd {
        display: block;
    }

    .calendarMonthEvent__shortRight {
        padding-left: 15px;
    }

    .calendarMonthEvent__text {
        display: block;
        overflow: visible;
        font-size: var(--sLargeFont);
        line-height: var(--sLargeFont);
        font-weight: bold;
        font-family: var(--fAccent);
    }

    .calendarMonthEvent__description {
        display: block;
        margin-top: 12px;
        font-size: var(--sMediumFont);
        line-height: var(--sBodySizeFont);
    }
}