@use '~@/style/globals';

.Material {
    display: flex;
    flex-wrap: wrap;

    &__form {
        flex: 2;
        max-width: globals.$form-max-width;
        min-width: globals.$form-min-width;
        margin-right: globals.$content-padding-large-vertical;

        &.Form {
            margin-bottom: 0;
        }
    }

    &__side {
        flex: 1;
        min-width: 250px;
        margin-bottom: globals.$form-fixed-actions-margin-bottom;

        .Progressbar {
            max-width: 350px;
            margin-top: globals.$content-padding-large-horizontal;
        }
    }

    &__no-attribute-help {
        margin: 0 0 1rem;
        color: globals.$text-muted-color;
        font-style: italic;
    }

    &__attributes {
        margin-bottom: 1.5rem;
    }

    &__attributes-help {
        margin-top: -0.5rem;
        margin-bottom: 1.5rem;
        color: globals.$text-light-color;
        font-style: italic;

        &__icon {
            margin-right: 0.3rem;
        }
    }

    &__modify-attribute-link {
        margin-bottom: 2rem;
    }

    &__ref .FormField__input {
        max-width: 180px;
    }

    &__quantity,
    &__price {
        .FormField__input {
            max-width: 80px;
        }
    }

    .Help {
        display: none;
    }

    @media screen and (min-width: globals.$screen-mobile) {
        .Form {
            margin-bottom: globals.$form-fixed-actions-margin-bottom;
        }

        &__side {
            margin-top: 30px;
        }

        .Help {
            display: block;
        }
    }

    @media screen and (min-width: globals.$screen-tablet) {
        &__modify-attribute-link {
            margin-left: globals.$form-label-width;
        }

        &__no-attribute-help {
            margin-left: globals.$form-label-width;
        }

        &__attributes-help {
            margin-left: globals.$form-label-width;
        }
    }
}
