<commit_before>@fancyDropdownColor: rgb(53, 143, 164);
@fancyDropdownOptionHiddenMargin: -70px;
@fancyDropdownOptionVisibleMargin: 6px;

.perseus-widget-dropdown {
    position: relative;

    .fancy-select {
        // Put some placeholder content hidden but always in the dropdown
        // so that its text-baseline vertical positioning doesn't change
        // when content is added
        &:before {
            font-size: 0; // to prevent it from moving the actual content
            visibility: hidden;
            content: "_";
        }

        border: 3px	solid @fancyDropdownColor;
        border-radius: 40px;
        color: @fancyDropdownColor;
        font: 700 23pt avenir, sans-serif;
        z-index: @zIndexInteractiveComponent;
        padding: 0 60px 0 35px;
        min-width: 40px;
        min-height: 40px;
        cursor: pointer;
        white-space: nowrap;
        user-select: none;
        -webkit-user-select: none;

        > .placeholder {
            opacity: 0.5;
        }

        &.active {
            opacity: 0.5;
        }

        &:after {
            color: @fancyDropdownColor;
            content: "\f0dd";
            font: 24pt "FontAwesome";
            position: absolute;
            top: 0px;
            right: 17px;
        }
    }

    .fancy-select-options {
        color: @fancyDropdownColor;
        position: absolute;
        z-index: @zIndexCurrentlyDragging;
        min-width: 100%;
    }

    .fancy-option {
        &:before {
            content: "";
            width: 16px;
            height: 16px;
            position: absolute;
            border: 3px solid @fancyDropdownColor;
            margin-top: 4px;
            margin-left: -30px;
            border-radius: 25px;
        }

        cursor: pointer;
        padding: 3px 20px 3px 38px !important; // Being disabled by khan-exercises
        font-size: 17pt;
        line-height: 22pt;
        background: rgba(255, 255, 255, 0.95);
        border: 3px solid @fancyDropdownColor;
        display: block;
        border-radius: 20px;
        min-width: 40px;
        min-height: 30px;
        margin-top: @fancyDropdownOptionHiddenMargin;

        &.selected {
            &:before {
                background: @fancyDropdownColor;
            }
        }
    }
}<commit_msg>Add press states for dropdown in perseus<commit_after>@fancyDropdownColor: rgb(53, 143, 164);
@fancyDropdownOptionHiddenMargin: -70px;
@fancyDropdownOptionVisibleMargin: 6px;

.perseus-widget-dropdown {
    position: relative;

    .fancy-select {
        // Put some placeholder content hidden but always in the dropdown
        // so that its text-baseline vertical positioning doesn't change
        // when content is added
        &:before {
            font-size: 0; // to prevent it from moving the actual content
            visibility: hidden;
            content: "_";
        }

        border: 3px	solid @fancyDropdownColor;
        border-radius: 40px;
        color: @fancyDropdownColor;
        font: 700 23pt avenir, sans-serif;
        z-index: @zIndexInteractiveComponent;
        padding: 0 60px 0 35px;
        min-width: 40px;
        min-height: 40px;
        cursor: pointer;
        white-space: nowrap;
        user-select: none;
        -webkit-user-select: none;

        > .placeholder {
            opacity: 0.5;
        }

        &.active {
            opacity: 0.5;
        }

        &:after {
            color: @fancyDropdownColor;
            content: "\f0dd";
            font: 24pt "FontAwesome";
            position: absolute;
            top: 0px;
            right: 17px;
        }
    }

    .fancy-select-options {
        color: @fancyDropdownColor;
        position: absolute;
        z-index: @zIndexCurrentlyDragging;
        min-width: 100%;
    }

    .fancy-option {
        &:before {
            content: "";
            width: 16px;
            height: 16px;
            position: absolute;
            border: 3px solid @fancyDropdownColor;
            margin-top: 4px;
            margin-left: -30px;
            border-radius: 25px;
        }

        cursor: pointer;
        padding: 3px 20px 3px 38px !important; // Being disabled by khan-exercises
        font-size: 17pt;
        line-height: 22pt;
        background: rgba(255, 255, 255, 0.95);
        border: 3px solid @fancyDropdownColor;
        display: block;
        border-radius: 20px;
        min-width: 40px;
        min-height: 30px;
        margin-top: @fancyDropdownOptionHiddenMargin;

        &.selected {
            &:before {
                background: @fancyDropdownColor;
            }
        }
    }
}


// Styles specifically for mobile
body.mobile {
    .perseus-widget-dropdown {
        .fancy-option:active {
            background: @fancyDropdownColor;
            color: white;

            &:before {
                background: white;
            }
        }
    }
}
{'fraction_non_alphanumeric': 0.09668901076579321, 'fraction_numerical': 0.03331302051594556, 'mean_word_length': 1.576661433804291, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, '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': '2367015', 'n_tokens_mistral': 1607, 'n_tokens_neox': 1414, 'n_words': 354}