@use '~@/style/globals';

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

    &__title {
        margin-bottom: 1rem;
        font-size: 1.2rem;

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

    &__help {
        color: globals.$text-nav-color;
    }

    &__error {
        margin: 0 0 1.5rem;
        color: globals.$text-danger-color;
    }

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

    &__item {
        display: flex;
        margin-bottom: 0.5rem;
        border-bottom: 1px dashed globals.$list-left-border-color;
        color: globals.$text-danger-color;
        list-style: none;

        &__name {
            flex: 1;
        }

        &__quantity {
            flex: 0 0 14.5rem;
            margin: 0 0.8rem;
        }
    }
}
