@use '~@/style/globals';

.MaterialViewInfos {
    display: flex;
    flex-flow: row-reverse wrap;
    justify-content: flex-end;
    padding-bottom: 6rem;

    &__main {
        flex: 2;
        min-width: 250px;
        margin-right: 3rem;
    }

    &__picture {
        flex: 0 0 auto;
        max-width: 350px;
        margin-right: 3rem;
        padding: 1rem 0 0;

        &__img {
            width: 100%;
        }
    }

    &__extras {
        flex: 1;
        min-width: 250px;
        padding: 1rem 0 0;
    }

    &__rental-price,
    &__stock-quantity {
        margin-bottom: 0.3rem;
        font-weight: 700;
    }

    &__out-of-order {
        color: globals.$text-danger-color;
    }

    &__categories {
        margin: 1.5rem 0;
    }

    &__dates {
        margin-top: 1.5rem;
        color: globals.$text-light-color;
    }

    &__notes {
        white-space: pre-wrap;
    }

    @media screen and (min-width: globals.$screen-tablet) {
        flex-direction: row;
        justify-content: flex-start;

        &__picture {
            max-width: 350px;
        }
    }

    @media screen and (min-width: globals.$screen-big-desktop) {
        &__picture {
            max-width: 400px;
        }
    }
}
