/**
    Stylesheet for the voting dial seen in issues and solutions

    This css trick is the same trick used by the tab to change sidebar views.
    The HTML for this element is not nested as it appears when looking at the interface. (it's an illusion)
    The elements for this toggle are stacked instead of nested, and this allows for some animation freedom.
*/

:root {

    --dial-width: 100px;
}

.dial {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}

    .dial input[type=radio] {
        display: none;
    }

.vote-dial-toggle {
    width: 53px;
    height: 100px; /* Fixed height */
    position: relative;
}

.vote-toggle-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: #f8f9fa;
    box-shadow: inset 0 0px 23px yellow;
    overflow-y: auto; /* Add vertical scrolling */
}

.user-voted .vote-toggle-container {
    box-shadow: inset 0 0px 23px rgb(11 76 251);
}

.lens {
    position: absolute;
    width: 100%;
    height: 36px;
    border-radius: 6px;
    transition: all 0.3s ease;
    pointer-events: none;
    background: #6495df;
}

.user-voted .lens {
    background: #757d10;
}

.outline {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 2px solid transparent;
    box-sizing: border-box;
    pointer-events: none;
}

.toggle-option {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    z-index: 2;
    cursor: pointer;
    font-weight: bold;
    color: #000000; /* Default text color is black */
}

.vote-count svg * {
    transition: fill .1s ease-in-out;

}
.vote-count:hover svg * {
    fill: #a48d8d !important;
}


/* Custom scrollbar styling */
.vote-toggle-container::-webkit-scrollbar {
    display: none;
}

.vote-toggle-container::-webkit-scrollbar-track {
    display: none;
}

.vote-toggle-container::-webkit-scrollbar-thumb {
    display: none;
}

    .vote-toggle-container::-webkit-scrollbar-thumb:hover {
    }