@use '~@/style/globals';

.EventDetailsHeader {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0.7rem 1rem;
    background-color: globals.$bg-color-main-header;

    &__status {
        flex: 0 0 auto;
        padding: 0 1rem 0 0;
        font-size: 2rem;

        .fa-exclamation-triangle {
            color: globals.$text-danger-color;
        }
    }

    &__details {
        flex: 1;
        color: globals.$text-nav-color;

        &__title {
            margin: 0 0 0.4rem;
            color: globals.$text-base-color;
            font-size: 1.4rem;
            font-weight: 800;
        }

        &__location-dates {
            margin-bottom: 0.2rem;
            font-size: 1.2rem;
        }

        &__in-progress {
            margin-left: globals.$content-padding-small-horizontal;
            color: globals.$text-success-color;
            font-size: 1.1rem;
        }
    }

    .EventDetailsHeaderActions {
        flex: 0 0 auto;
        margin: 0 1rem;
    }

    .close {
        flex: 0 0 auto;
        border: none;
        background: none;
    }
}
