@charset "utf-8";


.dialog-color-picker {
    padding:0px;
    border-width: 0px;
    border-radius: 10px;
    max-width: calc(100% - 20px);
    touch-action: none;
}
.dialog-color-picker[open] {
    display: flex;
}
.dialog-color-picker::backdrop {
    background-color: rgba(0, 0, 0, 0.75);
}

ui-color-picker{
    max-width: 100vw;
    min-width: 200px;
    font-size: 16px;
}
.dialog-color-picker ui-color-picker{
    max-width: min(768px, 98vw);
    max-height: 98dvh;
    height: auto;
}
ui-color-picker ui-color-swatches {
    max-height: max-content; 
    min-height: 80px;
    flex:1 1 300px

}
ui-color-picker ui-color-bar-hue::part(bg),
ui-color-picker ui-color-plane-sl::part(bg),
ui-color-picker ui-color-plane-sb::part(bg),
ui-color-picker ui-color-wheel-hue::part(bg){
    --bg-border-radius: 8px;
    --bg-border-color: #ccc;
    --bg-border-width: 2px;
}

ui-color-picker .wheel-group{
    position: relative;flex: 1 0 auto; aspect-ratio: 1/1;
}
ui-color-picker .wheel-group .inner-circle-position{
    position: absolute;
    z-index: 2;
    /* inset: 15%; */
    inset: calc((1 - var(--wheel-inner-ratio, 0.8) * 0.7) / 2 * 100% + 8px);
    aspect-ratio: 1/1;
}