:root{
	--brightness-css-loaded:1;
	/* --dominant-contrast: #202020; */
	/* --primary-shade: #181818; */
}

.widget.brightness{
    grid-column: 9/span 3;
    grid-row: 1 / span 7;
    background: transparent;
    padding: 0;
    border-radius: 0;
    position: relative;
    box-shadow: none;
    overflow:visible;
    /* position: absolute; */
    /* right: 0; */
}

.brightness-container {
    display: flex; 
    align-items: center; 
    height: 100%;
    width: 100%;
}
.slider-container {
    position: relative;
    margin-right: 0; /* Align slider to the right margin */
    margin-left: auto;
    width: 100%;
    height: 100%;
}

.slider-path {
    position: absolute;
    background: transparent;
    height: 100%;
    width: 100%;
    overflow: visible;
}

.slider-path path:where(.fg,.bg){
    stroke-width: calc( 0.5* var(--s));
    pointer-events:none;
    /* filter: drop-shadow( 0 0 1px rgba(255,255,255,0.8)); */
}

.slider-path path.bg{
    stroke: var(--primary-shade);
}
.slider-path path.fg{
    stroke:white;
}
.slider-path path.ui{
     stroke-width: calc( var(--s) + var(--c));
     stroke: transparent;
}

.handle {
    position: absolute;
    width: calc(var(--c) + var(--c)); /* Visual size */
    height: calc(var(--c) + var(--c)); /* Visual size */
    background-color: rgba(0,0,0,0.05);
    border-radius: 50%; /* Rounded edges for scroll effect */
    cursor: pointer;
    transform: translate(-50%, -50%);
	-webkit-user-select: none; /* Safari */
    user-select: none;
}    

.handle::after{
    position:absolute;
    width :var(--s);
    height:var(--s);
    background:white;
    content:'';
    border-radius: 50%;
    left:50%;
    top :50%;
    transform: translate(-50%,-50%);
    box-shadow: 0px 0px 8px 2px;
}

.percentage-display {
    font-size: calc( var(--c)); /* Adjust font size as needed */
    font-weight: 400;
    fill: white;
    text-anchor: end;
    alignment-baseline: middle;
}