@use '~@/style/globals';

.Materials {
    &__main-view {
        position: relative;
    }

    &__print-button {
        text-decoration: none;
    }

    &__filters {
        display: flex;
        flex-wrap: wrap;

        .MaterialsFilters {
            flex: 0 1 auto;
        }
    }

    &__quantities-date {
        flex: 1 0 auto;
        margin-bottom: globals.$content-padding-large-horizontal;

        &__input {
            width: 280px;
        }

        &__clear-button {
            margin-left: globals.$content-padding-small-horizontal;
            padding: 9px 10px;

            &__icon {
                margin-right: 2px;
            }
        }
    }

    &__ref,
    &__park,
    &__category,
    &__description,
    &__rental-price,
    &__replacement-price,
    &__quantity-broken,
    &__tags {
        display: none;
    }

    &__link {
        padding: 10px 0;

        // "important", pour surcharger la définition globale du <a>
        // stylelint-disable-next-line declaration-no-important
        color: globals.$text-base-color !important;

        &:hover {
            // "important", pour surcharger la définition globale du <a>
            // stylelint-disable-next-line declaration-no-important
            color: globals.$link-hover-color !important;
        }
    }

    &__category {
        white-space: nowrap;
    }

    &__rental-price,
    &__replacement-price {
        // stylelint-disable-next-line declaration-no-important
        text-align: right !important;
    }

    &__quantity,
    &__quantity-broken {
        // stylelint-disable-next-line declaration-no-important
        text-align: center !important;
    }

    &__quantity {
        &--remaining {
            // stylelint-disable-next-line declaration-no-important
            color: globals.$text-warning-color !important;
            font-weight: 800;
        }
    }

    // stylelint-disable-next-line selector-max-type
    &__quantity-broken:not(th) {
        // stylelint-disable-next-line declaration-no-important
        color: globals.$text-danger-color !important;
        font-weight: 800;
    }

    &__tags-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: -0.35rem;
        cursor: pointer;

        &:hover {
            color: globals.$link-hover-color;
        }
    }

    &__add-tags {
        flex: 1;
        margin-bottom: 0.35rem;
        padding: 0.4rem 0.55rem;
        font-size: 0.85rem;
    }

    &__actions {
        width: 1%;
        text-align: right;
        white-space: nowrap;
    }

    @media (min-width: globals.$screen-tablet) {
        &__ref,
        &__rental-price,
        &__replacement-price,
        &__category {
            display: table-cell;
        }
    }

    @media (min-width: globals.$screen-desktop) {
        &__quantity-broken,
        &__tags {
            display: table-cell;
        }
    }

    @media (min-width: globals.$screen-big-desktop) {
        &__park,
        &__description {
            display: table-cell;
        }

        &__filters {
            position: absolute;
            z-index: 1;
            left: globals.$table-search-input;
            right: calc(#{globals.$content-padding-large-vertical} + 45px + #{globals.$content-padding-small-vertical});
            flex-wrap: nowrap;
            align-items: center;

            .MaterialsFilters {
                flex-wrap: nowrap;
            }
        }
    }
}
