@import './styles/<!--partnerName--settings-->';
@import './styles/tools';

$c-quality-warning-component-color:
    transparentize($black-color, 0.4);

$c-quality-warning-component-color-poor-dpi: $warning-color-poor !default;
$c-quality-warning-component-color-average-dpi: $warning-color-average !default;
$c-quality-warning-component-color-good-dpi: $warning-color-good !default;

.c-quality-warning-component {
    display: flex;
    align-items: center;
    padding: 7px 22px 7px 8px;
    white-space: nowrap;
    margin: auto;
    background: transparentize($white-color, 0.1);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 17px;
    z-index: 4;
    @media screen and (min-height: 760px) {
        z-index: 3;
    }
}

    .c-quality-warning-component__btn-text {
        margin-left: 7px;
        font-weight: $font-weight-normal;
        color: $c-quality-warning-component-color;
        pointer-events: none;
    }

    .c-quality-warning-component__dpi-text--low {
        color: $c-quality-warning-component-color-poor-dpi;
    }

    .c-quality-warning-component__dpi-text--average {
        color: $c-quality-warning-component-color-average-dpi;
    }

    .c-quality-warning-component__dpi-text--good {
        color: $c-quality-warning-component-color-good-dpi;
    }

    .c-quality-warning-component__btn-icon {
        margin-left: 6px;
        $c-quality-warning-component__btn-icon--size: 16px;
        background: $c-quality-warning-component-color;
        border-radius: 50%;
        width: $c-quality-warning-component__btn-icon--size;
        height: $c-quality-warning-component__btn-icon--size;
        @include setSvgColor($white-color);
        pointer-events: none;
    }

    .c-quality-warning-component__btn-icon--low {
        background-color:
            $c-quality-warning-component-color-poor-dpi;
    }
    .c-quality-warning-component__btn-icon--average {
        background-color:
            $c-quality-warning-component-color-average-dpi;
    }
    .c-quality-warning-component__btn-icon--good {
        background-color:
            $c-quality-warning-component-color-good-dpi;
    }

.c-transparent-bg {
    background-color: transparent !important;
}