@use '~@/style/globals';

.MaterialsCategoryItem {
    padding: 0 0.5rem;
    border-left: 3px solid globals.$list-left-border-color;

    &__title {
        margin: 0 0 0.5rem;
    }

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

    &__material,
    &__subtotal {
        display: flex;
        list-style: none;

        &__name {
            flex: 1;
        }

        &__price {
            flex: 0 0 auto;
            margin-left: 0.8rem;
            color: globals.$text-light-color;
            text-align: right;
        }
    }

    &__material {
        margin-bottom: 0.35rem;
        border-bottom: 1px dashed globals.$list-left-border-color;

        &__quantity-first {
            flex: 0 0 35px;
            padding-right: globals.$content-padding-large-horizontal;
            color: globals.$text-light-color;
            text-align: right;
        }

        &__quantity {
            flex: 0 0 3rem;
            margin: 0 0.8rem;

            .fa-times {
                margin-right: 0.2rem;
                color: globals.$text-light-color;
                font-size: 0.8rem;
            }
        }

        &__total {
            flex: 0 0 5rem;
            margin-left: 0.8rem;
            text-align: right;
        }
    }

    &__subtotal {
        padding: 0.5rem 0 0;
        font-size: 1.1rem;

        &__name {
            color: globals.$text-light-color;
            text-align: right;
        }

        &__price {
            flex: 0 0 auto;
            color: globals.$text-base-color;
            font-weight: 600;
        }
    }
}
