@use '../../styles/mixins';

.heatmap {
    overflow: auto;

    height: 100%;
    @include mixins.flex-container();

    &__limits {
        display: flex;
        align-items: center;

        margin-left: 20px;
    }
    &__limits-block {
        display: flex;

        margin-right: 10px;
    }
    &__limits-title {
        margin-right: 5px;

        color: var(--g-color-text-secondary);
    }

    &__row {
        display: flex;
        align-items: center;

        &_overall {
            margin: 15px 20px;

            .g-progress {
                width: 300px;
                margin: 0;
            }
        }
    }

    &__label {
        margin-right: 16px;

        font-weight: 500;
        text-transform: uppercase;

        @include mixins.body-2-typography();

        &_overall {
            margin-right: 15px;
        }
    }

    &__items {
        position: relative;

        overflow: auto;
    }
    &__canvas-container {
        overflow: auto;

        cursor: pointer;
    }

    &__tooltip-anchor {
        position: absolute;

        width: 1px;
        height: 1px;

        pointer-events: none;
    }

    &__tooltip {
        padding: 10px;
    }

    &__filters {
        display: flex;
        align-items: center;

        margin: 0 0 10px;
    }

    &__filter-control {
        min-width: 100px;
        max-width: 200px;
        margin-right: 10px;

        &:last-child {
            margin-right: 0;
        }
    }
    &__sort-checkbox {
        margin-left: 10px;
    }
    &__histogram-checkbox {
        margin-left: 10px;
    }

    &__row {
        display: flex;

        margin-bottom: 2px;
    }

    .tablet {
        margin-bottom: 2px;
    }
}