@import "../../../theme";

@size-news-icon: 2.5rem;

.news {
    bottom: @size-control-inner + @size-border + @popup-content-padding;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    left: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    text-align: left;
    transition: all @time-slow;
    width: 100%;
    z-index: 1;

    &--expanded {
        max-height: 12rem;
        opacity: 1;
        pointer-events: initial;
    }

    &::before {
        background-image: linear-gradient(to top, @color-back, fade(@color-back, 0%));
        content: "";
        display: block;
        height: @size-control-inner;
        pointer-events: none;
        width: 100%;
    }

    &__header {
        align-items: flex-end;
        background-image: linear-gradient(to bottom, fade(@color-back, 90%), fade(@color-back, 95%));
        border-top: @size-border solid @color-border;
        color: @color-heading;
        display: flex;
        flex: none;
        font-size: @size-text-large;
        height: @size-control-inner;
        justify-content: space-between;
        padding-left: @popup-content-padding;

        &__text {
            line-height: @size-text-large-height;

            &__phone-icon {
                color: @color-fore;
                display: none;
                height: 1rem;
                margin: 0 0.25rem;
                position: relative;
                top: 0.125rem;
                width: 1rem;
            }

            &__dark-reader {
                font-weight: bold;
            }

            &__mobile {
                color: @color-control-fore;
            }
        }
    }

    &__close {
        color: @color-heading;
        cursor: pointer;
        display: inline-block;
        font-size: @size-control-inner * 3 / 4;
        height: @size-control-inner;
        line-height: @size-control-inner;
        text-align: center;
        user-select: none;
        width: @size-control-inner;

        &:hover {
            background-color: fade(@color-control-active, 25%);
        }
    }

    &__list {
        background-color: fade(@color-back, 95%);
        border-bottom: @size-border solid @color-border;
        flex: auto;
        padding: @indent-large @popup-content-padding;
        position: relative;

        > :not(:first-child) {
            margin-top: @indent-small;
        }
    }

    &__event {
        color: @color-fore;
        display: block;
        flex: none;
        position: relative;

        &__date {
            display: block;
            font-size: @size-text-small;
        }

        &__link {
            color: inherit;
            display: inline-block;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }

        &__icon {
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            display: inline-block;
            height: @size-news-icon;
            left: 0;
            position: absolute;
            top: calc(50% - @size-news-icon / 2);
            width: @size-news-icon;
        }

        &--has-icon {
            padding-left: @size-news-icon + @indent-small;
        }

        &--unread {
            font-weight: bold;

            &:first-child {
                color: @color-heading;
            }
        }

        &--important {
            color: @color-heading;
        }

        &--important&--unread {
            &::before {
                background-color: @color-heading;
                content: "";
                height: 100%;
                position: absolute;
                right: calc(100% + @indent-large / 2);
                text-align: center;
                top: 0;
                width: @size-border;
            }
        }
    }

    &__read-more {
        color: inherit;
        display: block;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }

        &--unread {
            font-weight: bold;
        }
    }

    &__mobile {
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: @indent-small;
        padding-bottom: @size-border;

        &__left {
            display: flex;
            flex: auto;
            flex-direction: column;
            gap: @indent-small;
        }

        &__right {
            display: flex;
            flex: none;
        }

        &__learn-more-container {
            align-items: center;
            display: flex;
            flex-direction: row;
            gap: @indent-small;
        }

        &__logos {
            display: flex;
            flex-direction: row;
            flex: none;
            gap: 0.25rem;
        }

        &__learn-more {
            color: @color-fore;
            font-weight: bold;
            transition: color @time-slow;

            &:hover {
                color: @color-control-fore;
            }
        }
    }

    &__qr-code {
        border-radius: 5%;
        display: inline-block;
        height: 5rem;
        width: 5rem;
    }

    &__os-icon {
        display: inline-block;
        height: 1.25rem;
        width: 1.25rem;
    }
}

.news-button {
    overflow: visible;
    position: relative;

    &--active {
        border-top: none;
        padding-top: @size-border;
        z-index: 2;
    }

    &::after {
        background-color: @color-heading;
        border-radius: @size-text-small-height / 2;
        color: @color-control-fore;
        content: attr(data-count);
        font-size: @size-text-small;
        line-height: @size-text-small-height;
        min-width: @size-text-small-height;
        position: absolute;
        right: -@size-text-small-height / 3;
        top: -@size-text-small-height / 3;
        z-index: 3;
    }

    &__phone-icon {
        display: inline-block;
        height: 1rem;
        width: 1rem;
    }

    &__wrapper {
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
}
