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

.perseus-widget-dropdown {
    position: relative;

    &.perseus-fancy-dropdown {
        position: static;
    }

    .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: "_";
        }

        position: relative;
        z-index: @zIndexInteractiveComponent;

        border: 3px	solid @fancyDropdownColor;
        border-radius: 40px;
        color: @fancyDropdownColor;
        font: 700 23pt avenir, sans-serif;
        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-wrapper {
        position: relative;
        z-index: @zIndexCurrentlyDragging;
    }

    .fancy-select-options {
        color: @fancyDropdownColor;
        position: absolute;
        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;
            }
        }
    }
}
