@use '~@/style/globals';

.ReuseEventMaterials {
    &__header {
        display: flex;
        align-items: center;
        padding: globals.$content-padding-small-horizontal globals.$content-padding-large-vertical;
        background-color: globals.$bg-color-main-header;

        &__title {
            flex: 1;
            font-size: 1.4rem;
        }

        &__btn-close {
            flex: 0 0 auto;
            border: none;
            background: none;
        }
    }

    &__main {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: globals.$content-padding-large-vertical globals.$content-padding-small-vertical;

        &--has-selected {
            .SearchEvents {
                display: none;
            }
        }
    }

    .SearchEvents {
        overflow-y: auto;
        width: 100%;
        max-height: 550px;
    }

    &__selected {
        padding: 0 globals.$content-padding-small-vertical;

        &__description {
            margin-bottom: globals.$content-padding-large-vertical;
        }

        .MaterialsSorted__categories {
            overflow-y: auto;
            min-width: 650px;
            max-height: 500px;
        }

        &__warning {
            margin-top: globals.$content-padding-large-vertical;
            color: globals.$text-warning-color;
            font-size: 1.2rem;

            .fas {
                margin-right: globals.$content-padding-small-horizontal;
            }
        }
    }

    &__footer {
        padding: globals.$content-padding-large-vertical;
        border-top: 1px solid globals.$tabs-bottom-border-color;
        text-align: center;
    }
}
