/*
Hacks
====================================
The `hacks.less` contains all dirty hacks like !important or negative margins, so you get a single place to document and set them.

More precise designations are commented inside the document.
*/

// The product tax information will be filled using a snippet through the administration. The WYSIWYG adds inline styles
// which needs to be overridden with a ```!important```
.product--tax a {
    text-decoration: none !important;

    &:hover {
        text-decoration: underline !important;
    }
}

// Arrow icon is too big on default font size. We have to reduce it manually
.entry--all-results-link i {
    font-size: 8px;
}

.table--shipping-costs-trigger i {
    .unitize-margin(-4, 0, 0, 0);
    font-size: 8px;
}

.table--footer i,
.premium-product--product .btn i,
.compare--button i,
.modal--compare .btn i {
    font-size: 8px;
}

.js--modal {
    // Modalbox should always have the maximum screen size when .is--fullscreen is active
    &.sizing--auto.is--fullscreen {
        height: 100% !important;
        width: 100% !important;
    }

    // Modalbox size should stay constant when the sizing was set to fixed
    &.sizing--fixed {
        max-height: none !important;
        max-width: none !important;
    }
}

// inactive class for disabling scrolling on different parts of Shopware
.is--inactive {
    overflow: hidden !important;
}

// Removing unwanted padding on button-elements in firefox
.btn::-moz-focus-inner {
    border: 0;
    padding: 0;
}

// IE 11 has a problem with "rem"-based line-height values, therefore we're forcing the size in pixel values
.is--ie .action--sort .sort--select:after {
    line-height: 34px;
}
.is--ie .register--login .register--new-customer .new-customer-btn::after {
    line-height: 16px;
}

.is--ie {
    .filter-panel--input input[type='checkbox']:checked ~ .input--state::before,
    .filter-panel--checkbox input[type='checkbox']:checked ~ .input--state::before,
    .filter-panel--radio input[type='checkbox']:checked ~ .input--state::before,
    .filter-panel--input input[type='checkbox']:checked ~ .checkbox--state::before,
    .filter-panel--checkbox input[type='checkbox']:checked ~ .checkbox--state::before,
    .filter-panel--radio input[type='checkbox']:checked ~ .checkbox--state::before {
        line-height: 12px;
    }
}

@media screen and (min-width: @tabletViewportWidth) {

    // Webkit based has problems with small "rem"-values which results in an much bigger font as declared.
    // To fix the behavior we need to set the icon size using "px"-values
    .top-bar--navigation .entry--service:after,
    .top-bar--navigation .entry--service::after {
        font-size: 5px;
    }

    // Sidebar arrow down size for all menus greater than level 0
    .sidebar--navigation .is--level1 .navigation--entry.has--sub-children.is--active:before,
    .sidebar--navigation .is--level1 .navigation--entry.has--sub-children.is--active::before {
        font-size: 5px;
    }

    // IE 11 has a problem with "rem"-based line-height values, therefore we're forcing the size in pixel values
    .is--ie .header-main .top-bar--navigation .select-field:after {
        line-height: 24px;
    }
    .is--ie .action--filter-btn .filter--trigger:before,
    .is--ie .action--filter-btn .filter--trigger:after {
        line-height: 16px;
    }

    // IE 11 and Edge browser have issues with text-indent property on select inputs
    .is--ie .header-main .top-bar--navigation .top-bar--language .select-field select,
    .is--edge .header-main .top-bar--navigation .top-bar--language .select-field select {
        font-size: 0;

        option {
            .unitize(font-size, 14);
        }
    }
}