//  ____       _ _
// |  _ \ ___ | | |___
// | |_) / _ \| | / __|
// |  __/ (_) | | \__ \
// |_|   \___/|_|_|___/
//

// Poll Badges require tweaking on mobile to stack vertically ; improve at will
@mobile: ~"only screen and (max-width: 600px)";


/*
Emote Support

What would be a good approach here?
Perhaps we should provide a font as well, for emotes.
Privilege ubiquitous emotes nonetheless, for accessibility.
Research notes:
- SVGinOT  (is that what firefox uses already?)
*/
.emote {
    font-family: "Source Code Pro", Consolas, monaco, monospace !important;
}


//  _____                    _
// |_   _|_      _____  __ _| | _____
//   | | \ \ /\ / / _ \/ _` | |/ / __|
//   | |  \ V  V /  __/ (_| |   <\__ \
//   |_|   \_/\_/ \___|\__,_|_|\_\___/
//

.ui.label {
    padding-top:    0.6em;
    padding-bottom: 0.6em;
}

.ui.form input[type="text"].inline-input {
    display: inline-block;
    width: initial;
    line-height: 1em;
    height: 1.62em;
    padding-left: 0.3em;
    padding-right: 0.3em;
}


//  ____       _ _   ____            _
// |  _ \ ___ | | | | __ )  __ _  __| | __ _  ___
// | |_) / _ \| | | |  _ \ / _` |/ _` |/ _` |/ _ \
// |  __/ (_) | | | | |_) | (_| | (_| | (_| |  __/
// |_|   \___/|_|_| |____/ \__,_|\__,_|\__, |\___|
//                                     |___/

.poll-badge {
    display: inline-block;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    /* Otherwise the h1 blocks a portion of the label's hover area */
    position: relative;
    z-index: 1;

    @media @mobile {
        display: block;
    }
}

.poll-badge:focus-within .judgment-forms,
.poll-badge:focus        .judgment-forms,
.poll-badge:hover        .judgment-forms {
    display: inline-block;
    left: -9px;
    opacity: 1.0;
}

.judgment-forms {
    display: none;
    position: relative;
    top: 0;
    left: -90px; /* keep as fallback */
    opacity: 0.0; /* keep as fallback */
    animation: fade_in_judgment_forms 0.4s ease-out;
    /*transition: left 0.4s ease-out 0s, opacity 0.3s ease-out 0s;*/
    vertical-align: middle;
}


/* Since transitions won't play with a change of display, we use animation */
@keyframes fade_in_judgment_forms {
    0% {
        pointer-events: none;
        opacity: 0;
        left: -150px;
        transform: scale(0.2);
    }
    95% {
        transform: scale(1.0);
    }
    99% {
        pointer-events: none;
    }
    100% {
        pointer-events: initial;
        opacity: 1;
        left: -9px;
    }
}

.judgment-form {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
}

.judgment-form input.emote {
    position: relative;
    width: 1.818rem;
    height: 1.918rem;
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 1.618em;
    background: none;
    transition: 0.3s filter, 0.2s transform;
    cursor: pointer;
    z-index: 2;
}

.judgment-form:not(.selected) input.emote {
    filter: grayscale(1.0);
}

.judgment-form.selected:focus-within::after,
.judgment-form.selected:hover::after {
    content: "×";
    pointer-events: none;
    position: absolute;
    top: 0.05em;
    left: 0.05em;
    color: darkred;
    opacity: 0.8;
    font-size: 3em;
    z-index: 3;
}

.judgment-form input.emote:hover,
.judgment-form input.emote:focus {
    background: none;
    filter: grayscale(0.0);
    transform: scale(1.1);
}


//  __  __           _ _   ____             __ _ _
// |  \/  | ___ _ __(_) |_|  _ \ _ __ ___  / _(_) | ___
// | |\/| |/ _ \ '__| | __| |_) | '__/ _ \| |_| | |/ _ \
// | |  | |  __/ |  | | |_|  __/| | | (_) |  _| | |  __/
// |_|  |_|\___|_|  |_|\__|_|   |_|  \___/|_| |_|_|\___|
//

.background-merit-profile {
    position: absolute;
    top: -0.29em;
    left: -0.3em;
    z-index: 1;
}


//   ____                _ _     _       _
//  / ___|__ _ _ __   __| (_) __| | __ _| |_ ___  ___
// | |   / _` | '_ \ / _` | |/ _` |/ _` | __/ _ \/ __|
// | |__| (_| | | | | (_| | | (_| | (_| | ||  __/\__ \
//  \____\__,_|_| |_|\__,_|_|\__,_|\__,_|\__\___||___/
//

ul.candidates.list li {
    display: flex;
    align-items: center; /* align vertically */
}