@use '~@/style/globals';

$spacing: 1.5rem;

.EventOverview {
    color: globals.$text-base-color;

    &__title {
        margin: globals.$content-padding-small-vertical 0 $spacing;
        font-size: 1.5rem;
    }

    &__dates-location,
    &__duration {
        margin: 0;
        font-size: 1.2rem;
    }

    &__description {
        margin: 0 0 $spacing 22px;
        padding-left: 5px;
        border-left: 3px solid globals.$tabs-bottom-border-color;
        font-size: 1.1rem;
        line-height: 1.5;
        white-space: pre-wrap;

        .fas {
            margin-left: -30px;
        }
    }

    &__dates-location,
    &__duration,
    &__description {
        .fas,
        .far {
            width: 1.5rem;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            font-size: 1.2rem;
            text-align: center;
        }
    }

    &__technician-periods {
        margin-bottom: globals.$content-padding-small-vertical;
        padding: 0;

        &__item {
            padding-left: 20px;
            color: globals.$text-nav-color;
            list-style: none;
        }
    }

    &__header,
    &__main {
        display: flex;
        flex-wrap: wrap;
    }

    &__main,
    &__materials,
    &__billing {
        margin-bottom: $spacing;
        border-bottom: 1px solid globals.$list-left-border-color;
    }

    &__missing-materials {
        margin-bottom: $spacing;
    }

    &__section {
        flex: 1;
        min-width: 200px;
        margin-right: $spacing;
        margin-bottom: $spacing;
    }

    &__info__term,
    &__materials__title,
    &__billing-title {
        margin: 0 0 $spacing;
        font-size: 1.2rem;
        font-weight: 600;

        .fas,
        .far {
            width: 1.5rem;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            text-align: center;
        }
    }

    &__info {
        margin: 0;

        & + & {
            margin-top: $spacing;
        }

        &__term {
            margin-bottom: 0.5rem;

            &::after {
                content: ':';
            }
        }

        &__value {
            display: block;
            margin: 0;
            font-size: 1.1rem;
        }

        &__list {
            margin: 0;
            padding: 0;
        }

        &__list-item {
            margin-left: 0.2rem;
            line-height: 1.4;
            list-style: inside;
        }

        &--vertical {
            flex-direction: column;
            align-items: flex-start;

            .EventOverview__info__value {
                margin-top: 0.5rem;
                margin-left: 0;
            }
        }
    }

    &__materials {
        &__empty {
            color: globals.$text-danger-color;

            .fas {
                margin-right: 0.3rem;
            }
        }
    }

    &__billing {
        display: flex;
        flex-direction: column;
        padding-bottom: $spacing;

        .EventTotals {
            flex: 0 0 auto;
            padding:
                globals.$content-padding-small-vertical
                globals.$content-padding-large-horizontal
                globals.$content-padding-large-vertical;
            border-left: 3px solid #383838;
            text-align: left;
        }

        &__tabs {
            flex: 1;
            min-width: 350px;
            padding: 0 globals.$content-padding-large-horizontal;
            border-left: 3px solid #383838;

            .DisplayBill__actions {
                max-width: 140px;
                text-align: center;
            }
        }

        .Help {
            margin-bottom: globals.$content-padding-small-vertical;
        }
    }

    @media (min-width: globals.$screen-desktop) {
        &__billing {
            flex-direction: row;
        }
    }
}
