/*
 * view-scale
 * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
 * (c) 2020 SP12893678
 * under the MIT license
 */

.notion-topbar-actions{
    display: flex;
    align-items: center !important;
    justify-content: center;
    
}

.notion-scale-container{
    border: 1px solid rgba(200, 200, 200, 0.5);
    border-radius: 9999px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px 4px;
}

.notion-scale-container div{
    margin: 2px 0px;
    cursor: pointer;
}

.notion-scale-view{
    font-size: 12px;
    font-weight: bold;
}
  
.notion-scale-button{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    transition: .5s;
}

.notion-scale-button:hover{
    background: var(--theme--interactive_hover);
}

.notion-scale-slider{
    margin-left: 8px;
    margin-right: 4px;
}

.notion-scale-slider[type="range"]{
    -webkit-appearance: none;
    outline: 0;
	border: 0px;
    overflow:hidden;    
    width:150px;
    height:20px;
    cursor: ew-resize;
    border-radius: 9999px; 
}

.notion-scale-slider[type="range"]::-webkit-slider-runnable-track {
    height:20px;
    -webkit-appearance: none;
    background-color: #ddd;
}

.notion-scale-slider[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    position: relative;   
    width:20px;
    height:20px;
    border-radius: 9999px;
    border: 0px;
    background: #1597ff;
    box-shadow: -100px 0 0 90px #1597ff, inset 0 0 0 20px #1597ff;
    filter: drop-shadow(0px 0px 2px rgba(87, 50, 50, 0.3));
    transition:.2s;     
}

.notion-scale-slider[type=range]:active::-webkit-slider-thumb {
    background: #fff;
    box-shadow: -100px 0 0 90px #1597ff, inset 0 0 0 2px #1597ff;
}