/* smart-color-panel */

smart-color-panel {
    width: var(--smart-color-panel-default-width);
    height: var(--smart-color-panel-default-height);
    touch-action: none;
    user-select: none;
}

    smart-color-panel.smart-element {
        display: inline-block;
        overflow: initial;
        border: none;
        background: transparent;
    }

    smart-color-panel[disabled] {
        opacity: 0.55;
        pointer-events: none;
        user-select: none;
    }

    /*Content*/
    .smart-color-panel .smart-content {
        position: relative;
        cursor: pointer;
        display: flex;
        width: 100%;
        height: 100%;
    }

    .smart-color-panel .color-input {
        width: 70px;
        height: var(--smart-editor-height);
        margin: 5px;
        padding: 5px;
        border: var(--smart-border-width) solid var(--smart-border);
        border-radius: var(--smart-border-radius);
        background: var(--smart-background);
        color: var(--smart-color);
        outline: none;
    }

        .smart-color-panel .color-input:focus {
            border-color: var(--smart-outline);
        }

        .smart-color-panel .color-input::selection {
            background: var(--smart-editor-selection);
            color: var(--smart-editor-selection-color);
        }

    .smart-color-panel label {
        /*min-width: 16px;*/
        display: inline-block;
        user-select: none;
    }

    .smart-color-panel .grid-mode-container,
    .smart-color-panel .palette-mode-container {
        width: 100%;
        max-height: 100%;
        position: relative;
    }

    .smart-color-panel .palette-mode-container,
    .smart-color-panel .spectrum-grid-samples-container,
    .smart-color-panel .color-palette-hexagonal,
    .smart-color-panel[display-mode="grid"] .palette-mode-container,
    .smart-color-panel[display-mode="grid"] .material-grid-samples-container,
    .smart-color-panel[display-mode="grid"] .default-samples-container,
    .smart-color-panel[display-mode="default"] .grid-samples-container,
    .smart-color-panel[display-mode="default"] .palette-mode-container,
    .smart-color-panel[display-mode="default"] .material-grid-samples-container,
    .smart-color-panel[display-mode="spectrumGrid"] .palette-mode-container,
    .smart-color-panel[display-mode="spectrumGrid"] .grid-samples-container,
    .smart-color-panel[display-mode="spectrumGrid"] .material-grid-samples-container,
    .smart-color-panel[display-mode="spectrumGrid"] .default-samples-container,
    .smart-color-panel[display-mode="materialGrid"] .palette-mode-container,
    .smart-color-panel[display-mode="materialGrid"] .grid-samples-container,
    .smart-color-panel[display-mode="materialGrid"] .default-samples-container,
    .smart-color-panel[display-mode="hexagonal"] .grid-samples-container,
    .smart-color-panel[display-mode="hexagonal"] .spectrum-grid-samples-container,
    .smart-color-panel[display-mode="hexagonal"] .color-palette,
    .smart-color-panel[display-mode="hexagonal"] .hue-scale,
    .smart-color-panel[display-mode="hexagonal"] .default-samples-container,
    .smart-color-panel .grid-samples-container,
    .smart-color-panel .custom-color-selection .grid-mode-container,
    .smart-color-panel[display-mode="palette"] .color-palette-radial,
    .smart-color-panel[display-mode="palette"] .grid-mode-container,
    .smart-color-panel[display-mode="radial"] .color-palette,
    .smart-color-panel[display-mode="radial"] .grid-mode-container,
    .smart-color-panel .button-custom-color,
    .smart-color-panel .user-samples-container,
    .smart-color-panel[enable-custom-colors][display-mode="hexagonal"] .button-custom-color,
    .smart-color-panel[enable-custom-colors][display-mode="hexagonal"] .user-samples-container,
    .smart-color-panel[hide-preview-container] .preview-container,
    .smart-color-panel[hide-alpha-editor] .a-channel,
    .smart-color-panel[hide-r-g-b-editor] .r-channel,
    .smart-color-panel[hide-r-g-b-editor] .g-channel,
    .smart-color-panel[hide-r-g-b-editor] .b-channel,
    .smart-color-panel[hide-h-e-x-editor] .hex {
        display: none;
    }

    .smart-color-panel[display-mode="spectrumGrid"] .spectrum-grid-samples-container,
    .smart-color-panel[display-mode="default"] .default-samples-container,
    .smart-color-panel[display-mode="palette"] .palette-mode-container,
    .smart-color-panel[display-mode="palette"] .color-palette,
    .smart-color-panel[display-mode="materialGrid"] .color-palette,
    .smart-color-panel[display-mode="hexagonal"] .palette-mode-container,
    .smart-color-panel[display-mode="hexagonal"] .color-palette-hexagonal,
    .smart-color-panel[display-mode="hexagonal"] .brightness-scale,
    .smart-color-panel[display-mode="radial"] .palette-mode-container,
    .smart-color-panel[display-mode="radial"] .color-palette-radial {
        display: block;
    }

    .smart-color-panel[enable-custom-colors]:not([display-mode="palette"]):not([display-mdoe="radial"]) .custom-color-selection .palette-mode-container {
        display: block;
    }

    .smart-color-panel .color-palette-container {
        width: 100%;
        height: var(--smart-color-panel-palette-size);
        display: flex;
        flex-direction: row;
    }

    .smart-color-panel[display-mode="hexagonal"] .color-palette-container {
        height: var(--smart-color-panel-palette-height);
    }

    .smart-color-panel .color-palette,
    .smart-color-panel[display-mode="radial"] .color-palette-radial {
        width: var(--smart-color-panel-palette-size);
        height: var(--smart-color-panel-palette-size);
        background-color: red;
        border-color: lightgray;
        display: block;
        position: relative;
        overflow: hidden;
        cursor: crosshair;
        padding: 1px;
        border: 1px solid lightgray;
        background-clip: content-box;
    }

        .smart-color-panel .color-palette::before,
        .smart-color-panel .color-palette::after {
            width: 100%;
            height: 100%;
            content: " ";
            background-image: linear-gradient(transparent, black);
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 0;
        }

    .smart-color-panel[display-mode="radial"] .color-palette-radial {
        background: conic-gradient(from 90deg, red, yellow, lime, aqua, blue, magenta, red) rgb(255, 0, 90);
        border-radius: 50%;
    }

    .smart-color-panel:not([display-mode="radial"]) .canvas-radial {
        display: none;
    }

    .smart-color-panel[display-mode="radial"] .color-palette-radial::after {
        width: 100%;
        height: 100%;
        content: " ";
        display: block;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 0;
        background: black;
        opacity: var(--smart-color-panel-brightness);
        border-radius: 50%;
    }

    .smart-color-panel[display-mode="radial"][inverted] .color-palette-radial::after {
        background: white;
    }

    .smart-color-panel[display-mode="radial"] .white-radial-gradient {
        z-index: 2;
        width: var(--smart-color-panel-palette-size);
        height: var(--smart-color-panel-palette-size);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background-image: radial-gradient(circle, white, transparent);
    }

    .smart-color-panel[display-mode="radial"] canvas {
        transform: rotate(-180deg);
        transform-origin: center;
    }

    .smart-color-panel[display-mode="radial"][inverted] .white-radial-gradient {
        background: radial-gradient(black, transparent);
    }

    .smart-color-panel .color-palette-thumb,
    .smart-color-panel[display-mode="radial"] .color-palette-radial-thumb {
        width: 0px;
        height: 0px;
        top: 0px;
        position: absolute;
        z-index: 10;
        pointer-events: none;
    }

    .smart-color-panel[display-mode="radial"] .color-palette-radial-thumb {
        left: 50%;
        top: 50%;
    }

        .smart-color-panel .color-palette-thumb::after,
        .smart-color-panel[display-mode="radial"] .color-palette-radial-thumb::after {
            content: " ";
            position: absolute;
            left: -14px;
            top: -14px;
            width: 16px;
            height: 16px;
            border: 5px solid white;
            border-radius: 50%;
            box-shadow: var(--smart-elevation-2);
        }

    .smart-color-panel .color-palette::before {
        background-image: linear-gradient(90deg, white, transparent);
    }

    .smart-color-panel[display-mode="hexagonal"] .brightness-scale,
    .smart-color-panel[display-mode="radial"] .brightness-scale,
    .smart-color-panel .hue-scale,
    .smart-color-panel .color-controls-container {
        display: block;
        max-width: 100px;
    }

    .smart-color-panel .color-controls-container {
        overflow: hidden;
    }

    .smart-color-panel[display-mode="hexagonal"] .brightness-scale,
    .smart-color-panel[display-mode="radial"] .brightness-scale,
    .smart-color-panel .hue-scale {
        height: var(--smart-color-panel-palette-size);
        background-image: linear-gradient(#ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000); /* reversed (#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) */
        width: 20px;
        margin-left: 15px;
        margin-right: 15px;
        position: relative;
        padding: 1px;
        border: var(--smart-border-width) solid var(--smart-border);
        background-clip: content-box;
    }

    .smart-color-panel[display-mode="hexagonal"] .brightness-scale {
        height: var(--smart-color-panel-palette-height);
    }

    .smart-color-panel[display-mode="radial"] .hue-scale {
        display: none;
    }

    .smart-color-panel[display-mode="hexagonal"] .brightness-scale,
    .smart-color-panel[display-mode="radial"] .brightness-scale {
        background-image: linear-gradient(white, black);
    }

    .smart-color-panel[display-mode="hexagonal"] .brightness-scale-thumb,
    .smart-color-panel[display-mode="radial"] .brightness-scale-thumb,
    .smart-color-panel .hue-scale-thumb {
        width: 100%;
        height: 10px;
        box-sizing: content-box;
        border: 3px solid white;
        border-left-width: 10px;
        border-right-width: 10px;
        position: absolute;
        left: -10px;
        top: -3px;
        box-shadow: 0px 0px 5px #666, inset 0px 0px 2px 0px #999, inset 0px 0px 2px 0px #999;
        opacity: 0.8;
        cursor: pointer;
    }

    .smart-color-panel .preview-container {
        width: 100%;
        min-width: 100px; /* or use variable thet defines the default width of the column*/
        height: 100px;
        background-color: white;
        margin-bottom: 20px;
        position: relative;
        padding: 1px;
        border: var(--smart-border-width) solid var(--smart-border);
        background-clip: content-box;
    }

    .smart-color-panel .preview-container-top,
    .smart-color-panel .preview-container-bottom {
        width: 100%;
        height: 50%;
        display: block;
        background-color: white;
    }

    .smart-color-panel .alpha-channel-container {
        flex-direction: row;
        width: 100%;
        align-content: center;
        align-items: center;
        align-content: space-around;
        margin-top: 5px;
        display: none;
    }

    .smart-color-panel[edit-alpha-channel] .alpha-channel-container {
        display: flex;
    }

    .smart-color-panel .alpha-channel-container label {
        width: 48px;
    }

    .smart-color-panel .alpha-channel-scale {
        width: var(--smart-color-panel-palette-size);
        height: 20px;
        margin-top: 15px;
        margin-bottom: 15px;
        position: relative;
        border: var(--smart-border-width) solid var(--smart-border);
        margin-right: 20px;
    }

    .smart-color-panel[display-mode="hexagonal"] .alpha-channel-scale {
        width: var(--smart-color-panel-palette-width);
    }

    .smart-color-panel .alpha-channel-scale::before {
        position: absolute;
        left: 0px;
        top: 0px;
        display: block;
        width: 100%;
        height: 100%;
        content: " ";
        background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc);
        background-position: 0px 6px, 8px 14px;
        background-size: 16px 16px;
    }

    .smart-color-panel .alpha-channel-scale::after {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        content: " ";
        background-image: linear-gradient(90deg, var(--smart-color-panel-alpha-channel-color), transparent);
        box-shadow: inset 1px -1px 0px 0px #ffffff, inset -1px 1px 0px 0px #ffffff;
    }

    .smart-color-panel .alpha-channel-thumb {
        width: 10px;
        height: 100%;
        box-sizing: content-box;
        border: 3px solid white;
        border-top-width: 10px;
        border-bottom-width: 10px;
        position: absolute;
        left: -3px;
        top: -10px;
        opacity: 0.8;
        box-shadow: 0px 0px 5px #666, inset 0px 0px 2px 0px #999, inset 0px 0px 2px 0px #999;
        cursor: pointer;
        z-index: 1;
    }

    .smart-color-panel .buttons-container {
        display: none;
        flex-direction: row;
        justify-content: flex-end;
        padding: 10px 0px 10px 0px;
    }

        .smart-color-panel .buttons-container smart-button {
            width: 100px;
        }

            .smart-color-panel .buttons-container smart-button:last-of-type {
                margin-left: 20px;
            }

    .smart-color-panel .custom-color-selection .buttons-container,
    .smart-color-panel[apply-value-mode="useButtons"] .buttons-container {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .smart-color-panel .gradient-background {
        background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc);
        background-position: 0px 6px, 8px 14px;
        background-size: 16px 16px;
    }

    .smart-color-panel .user-color-container {
        width: var(--smart-color-panel-grid-mode-item-size);
        height: var(--smart-color-panel-grid-mode-item-size);
        background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc);
        background-position: 0px 5px, 5px 10px;
        background-size: 10px 10px;
    }

    .smart-color-panel .color-sample.user-color {
        position: relative;
        background-clip: padding-box;
    }

        .smart-color-panel .color-sample.user-color::before {
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;
            background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc);
            background-position: 0px 5px, 5px 10px;
            background-size: 10px 10px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
        }

    .smart-color-panel .material-grid-samples-container,
    .smart-color-panel .gray-shades-box,
    .smart-color-panel .spectrum-box,
    .smart-color-panel .custom-colors-box,
    .smart-color-panel .grid-samples-container {
        display: grid;
        grid-template-columns: repeat(var(--smart-color-panel-grid-mode-column-count), auto);
    }

    .smart-color-panel .material-grid-samples-container {
        grid-template-columns: 80px repeat(14, auto);
    }

    .smart-color-panel .default-samples-container div {
        display: grid;
        grid-template-columns: repeat(10, auto);
    }

    .smart-color-panel[enable-custom-colors] .button-custom-color,
    .smart-color-panel[enable-custom-colors] .user-samples-container {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .smart-color-panel .button-custom-color {
        margin: 5px 0px 5px 0px;
    }

    .smart-color-panel .color-sample {
        width: var(--smart-color-panel-grid-mode-item-size);
        height: var(--smart-color-panel-grid-mode-item-size);
        margin: var(--smart-color-panel-grid-mode-columns-gap);
        box-sizing: border-box;
        cursor: pointer;
        border: var(--smart-border-width) solid rgba(0,0,0,0.1);
        background-clip: content-box;
        text-overflow: ellipsis;
    }

        .smart-color-panel .color-sample[transparent] {
            position: relative;
        }

            .smart-color-panel .color-sample[transparent]::after {
                content: '';
                border: 1px solid red;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) rotate(-45deg);
                position: absolute;
                width: 150%;
                border-radius: 5px;
            }

        .smart-color-panel .color-sample.selected {
            border: 2px solid rgba(0,0,0,0.2);
            padding: 1px;
        }

        .smart-color-panel .color-sample.empty {
            visibility: hidden;
        }

        .smart-color-panel .color-sample.header,
        .smart-color-panel .color-sample.label-column {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            border-width: 0px;
            pointer-events: none;
            user-select: none;
        }

        .smart-color-panel .color-sample.label-column {
            width: 100%;
            justify-content: flex-start;
        }

        .smart-color-panel .color-sample.color-sample-column,
        .smart-color-panel .color-sample.color-sample-row {
            width: 16px; /*to be calculated dinamically*/
            height: 16px; /*to be calculated dinamically*/
            border: 2px solid rgba(0,0,0,0.2);
            padding: 1px;
            background: repeating-linear-gradient( -55deg, #fff, #fff 10px, #eee 10px, #eee 20px);
        }

    .smart-color-panel input[type=number]::-webkit-inner-spin-button,
    .smart-color-panel input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .smart-color-panel input[type=number] {
        -moz-appearance: textfield;
    }

    .smart-color-panel smart-tooltip .smart-tooltip-content {
        box-shadow: 0px 0px 20px 0px #8b8b8b;
    }

    .smart-color-panel .user-color.empty {
        background: repeating-linear-gradient( -55deg, #fff, #fff 10px, #eee 10px, #eee 20px);
        background-origin: content-box;
        border-color: lightgray;
    }

    .smart-color-panel[display-mode="hexagonal"] .selected {
        stroke: white;
        stroke-width: 4px;
    }

    .smart-color-panel .default-samples-container .theme-colors-label,
    .smart-color-panel .default-samples-container .standard-colors-label,
    .smart-color-panel .default-samples-container .theme-shades-box {
        margin-top: var(--smart-color-panel-default-mode-sections-gap);
        margin-bottom: var(--smart-color-panel-default-mode-sections-gap);
    }

    .smart-color-panel .default-samples-container .theme-colors-label,
    .smart-color-panel .default-samples-container .standard-colors-label {
        display: block;
        font-weight: 600;
        margin-left: 2px;
        margin-bottom: calc(var(--smart-color-panel-default-mode-sections-gap)/2);
    }

    .smart-color-panel .hex-mode-resize-trigger {
        visibility: hidden;
        position: absolute;
        left: 0;
        top: 0;
    }

    /* ---  Right-To-Left --- */

    .smart-color-panel[right-to-left] .grid-mode-container,
    .smart-color-panel[right-to-left] .color-palette-container,
    .smart-color-panel[right-to-left] .alpha-channel-container {
        direction: rtl;
    }

    .smart-color-panel[right-to-left] .alpha-channel-scale {
        margin: 0 0 0 20px;
    }

        .smart-color-panel[right-to-left] .alpha-channel-scale::after {
            background-image: linear-gradient(90deg, transparent, var(--smart-color-panel-alpha-channel-color));
        }

    .smart-color-panel[right-to-left] .buttons-container {
        flex-direction: row-reverse;
    }

        .smart-color-panel[right-to-left] .buttons-container smart-button:last-of-type {
            margin: 0 20px 0 0;
        }

/* --- */