<commit_before>@import "../../../css/config/font";

$color-common: #75e1ff;
$color-common-fg: #004052;
$color-jvm: #79bf2d;
$color-native: #6d6dff;
$color-js: #ffb100;

$color-select-off: #d3d6d9;
$color-select-off-fg: #222222;
$color-select-on-pressed: #e4e6e8;

$platforms: (
    common: (
        bg: #75e1ff,
        fg: #004052,
        select-hover: #3ad4ff
    ),
    jvm: (
        bg: #79bf2d,
        select-hover: #6bac25
    ),
    js: (
        bg: #ffb100,
        select-hover: #ff9b00
    ),
    native: (
        bg: #6d6dff,
        select-hover: #4b4bff
    )
);

@each $platform, $params in $platforms {
    .api-panel_toggle {
        .toggle-platform.#{$platform} {
            background-color: map-get($params, bg);
            @if map-has-key($params, fg) {
                color: map-get($params, fg);
            }
        }
        .toggle-platform.#{$platform}:hover {
            background-color: map-get($params, select-hover);
        }

        .toggle-platform.off.#{$platform}:hover {
            background-color: map-get($params, select-hover);
            @if map-has-key($params, fg) {
                color: map-get($params, fg);
            } @else {
                color: white;
            }
        }
        .toggle-platform.pressed.#{$platform} {
            background-color: map-get($params, bg);
        }
        .toggle-platform.off.pressed.#{$platform} {
            background-color: $color-select-off;
            color: $color-select-off-fg;
            span {
                opacity: 0.6;
            }
        }
    }



    .tags .platform.tag-value-#{$platform} {
        background-color: map-get($params, bg);
        @if map-has-key($params, fg) {
            color: map-get($params, fg);
        }
    }
}



.api-page-panel {
    display: flex;
    flex-direction: column;
}

.api-docs-breadcrumbs {
    flex-grow: 1;
}

.api-panel__dropdown-title {
    padding-right: 10px;
}

.api-panel__switchers {
    display: flex;
    margin-left: auto;
    margin-right: 0;
    padding-bottom: 10px;
    padding-right: 0;
}

.api-panel_toggle {
    margin-left: auto;
    display: flex;
    .toggle-platform {
        height: 24px;
        border-radius: 12px;

        font-family: InterUI-Regular;
        font-size: 14px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 24px;
        letter-spacing: normal;
        text-align: center;
        color: #ffffff;

        margin-left: 8px;
        padding: 0 16px;

    }

    .toggle-platform.off {
        background-color: $color-select-off;
        color: $color-select-off-fg;
        span {
            opacity: 0.4;
        }
    }

    .toggle-platform.off:hover {
        span {
            opacity: 1;
        }
    }
}

.api-panel__select {
    padding-right: 20px;
}

.tags {<commit_msg>Use click-able cursor for platform toggles<commit_after>@import "../../../css/config/font";

$color-common: #75e1ff;
$color-common-fg: #004052;
$color-jvm: #79bf2d;
$color-native: #6d6dff;
$color-js: #ffb100;

$color-select-off: #d3d6d9;
$color-select-off-fg: #222222;
$color-select-on-pressed: #e4e6e8;

$platforms: (
    common: (
        bg: #75e1ff,
        fg: #004052,
        select-hover: #3ad4ff
    ),
    jvm: (
        bg: #79bf2d,
        select-hover: #6bac25
    ),
    js: (
        bg: #ffb100,
        select-hover: #ff9b00
    ),
    native: (
        bg: #6d6dff,
        select-hover: #4b4bff
    )
);

@each $platform, $params in $platforms {
    .api-panel_toggle {
        .toggle-platform.#{$platform} {
            background-color: map-get($params, bg);
            @if map-has-key($params, fg) {
                color: map-get($params, fg);
            }
        }
        .toggle-platform.#{$platform}:hover {
            background-color: map-get($params, select-hover);
        }

        .toggle-platform.off.#{$platform}:hover {
            background-color: map-get($params, select-hover);
            @if map-has-key($params, fg) {
                color: map-get($params, fg);
            } @else {
                color: white;
            }
        }
        .toggle-platform.pressed.#{$platform} {
            background-color: map-get($params, bg);
        }
        .toggle-platform.off.pressed.#{$platform} {
            background-color: $color-select-off;
            color: $color-select-off-fg;
            span {
                opacity: 0.6;
            }
        }
    }



    .tags .platform.tag-value-#{$platform} {
        background-color: map-get($params, bg);
        @if map-has-key($params, fg) {
            color: map-get($params, fg);
        }
    }
}



.api-page-panel {
    display: flex;
    flex-direction: column;
}

.api-docs-breadcrumbs {
    flex-grow: 1;
}

.api-panel__dropdown-title {
    padding-right: 10px;
}

.api-panel__switchers {
    display: flex;
    margin-left: auto;
    margin-right: 0;
    padding-bottom: 10px;
    padding-right: 0;
}

.api-panel_toggle {
    margin-left: auto;
    display: flex;
    .toggle-platform {
        height: 24px;
        border-radius: 12px;

        font-family: InterUI-Regular;
        font-size: 14px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 24px;
        letter-spacing: normal;
        text-align: center;
        color: #ffffff;

        margin-left: 8px;
        padding: 0 16px;
        cursor: pointer;
    }

    .toggle-platform.off {
        background-color: $color-select-off;
        color: $color-select-off-fg;
        span {
            opacity: 0.4;
        }
    }

    .toggle-platform.off:hover {
        span {
            opacity: 1;
        }
    }
}

.api-panel__select {
    padding-right: 20px;
}

.tags {
{'fraction_non_alphanumeric': 0.14981855883877657, 'fraction_numerical': 0.02833938137204078, 'mean_word_length': 1.6453382084095065, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '636740', 'n_tokens_mistral': 2118, 'n_tokens_neox': 1985, 'n_words': 343}