@use '~@/style/globals';

.CalendarHeader {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    padding: globals.$content-padding-large-horizontal globals.$content-padding-small-vertical 0;

    &__timeline-actions {
        flex: 0 1 auto;
        display: flex;
        align-items: center;
        margin-bottom: globals.$content-padding-large-horizontal;
    }

    &__filters {
        flex: 1 1 auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: globals.$content-padding-large-horizontal;
    }

    &__loading-container {
        flex: 0 0 130px;
        min-width: 130px;
        margin-bottom: globals.$content-padding-large-horizontal;
    }

    &__actions {
        flex: 1 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: globals.$content-padding-large-horizontal;
    }

    &__loading {
        display: flex;
        align-items: center;
        justify-content: center;
        color: globals.$text-warning-color;
        font-weight: 600;

        .fa-spin {
            margin-right: globals.$content-padding-small-horizontal;
            margin-bottom: 0.1rem;
            font-size: 1.8rem;
        }
    }

    &__center-date {
        flex: 1;
        margin-right: 0.5rem;

        .FormField__label {
            flex: 0 0 auto;
            display: none;
            padding-left: 0;
        }

        .FormField__datepicker {
            width: 100%;

            &__input {
                padding: 8px 10px;
            }
        }
    }

    &__button {
        flex: 0 0 auto;
        margin: 0 0.5rem 0 0;

        &__title {
            display: none;
            margin-left: 0.5rem;
        }
    }

    &__filter {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        margin-right: 1rem;

        &__label {
            max-width: 170px;
        }

        .SwitchToggle {
            margin-top: 3px;
        }

        &__select {
            padding: 0.55rem 0.78rem;
        }

        &--active {
            color: globals.$text-warning-color;

            .CalendarHeader__filter__select {
                background-color: globals.$bg-color-button-warning;
            }

            .CalendarHeader__filter__label {
                color: globals.$text-warning-color;
            }

            .SwitchToggle__button {
                background-color: globals.$bg-color-button-warning;
            }
        }
    }

    @media (min-width: globals.$screen-mobile) {
        padding: globals.$content-padding-large-horizontal globals.$content-padding-large-vertical 0;

        &__button__title {
            display: inline-block;
        }
    }

    @media (min-width: globals.$screen-tablet) {
        &__center-date {
            min-width: 200px;

            .FormField__label {
                display: block;
            }
        }
    }

    @media (min-width: globals.$screen-big-desktop) {
        &__filters {
            justify-content: flex-end;
        }
    }
}
