/* smart-color-picker */

smart-color-picker {
    width: var(--smart-color-picker-default-width);
    height: var(--smart-color-picker-default-height);
}

    smart-color-picker.smart-element {
        overflow: initial;
        border: none;
    }

    .smart-color-picker smart-color-panel {
        position: relative;
        display: flex;
        width: 100%;
        height: 100%;
    }

.smart-drop-down.smart-drop-down-color-picker.smart-drop-down-container {
    width: var(--smart-color-picker-drop-down-width);
    max-width: none;
    height: var(--smart-color-picker-drop-down-height);
    max-height: none;
    box-sizing: content-box;
    overflow: hidden;
}

/*
  transfered from drop down button
*/
.smart-color-picker .smart-ripple {
    background: var(--smart-primary-color);
}

.smart-color-picker smart-color-panel,
.smart-drop-down-repositioned smart-color-panel {
    width: 100%;
    height: 100%;
    padding: 5px;
    border: none;
}



.smart-color-picker .smart-color-box {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: var(--smart-border-radius);
    border: var(--smart-border-width) solid var(--smart-border);
    background-color: var(--smart-background);
    margin-right: 5px;
    overflow: hidden;
    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-picker .smart-color-box.no-color {
        background-image: linear-gradient(45deg, transparent 47.5%, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 52.5%, transparent 52.5%), linear-gradient(-45deg, transparent 47.5%, rgba(0,0,0,0.2) 20%, rgba(0,0,0,0.2) 52.5%, transparent 52.5%);
        background-position: initial;
        background-size: initial;
    }

    .smart-color-picker .smart-color-box > div {
        width: 100%;
        height: 100%;
    }

.smart-color-picker .smart-color-input {
    border: 0;
    background-color: transparent;
    outline: none;
    color: inherit;
}

.smart-color-picker:not([opened]) .smart-color-input {
    color: inherit;
}

.smart-color-picker[value-display-mode="colorCode"] .smart-color-box,
.smart-color-picker[value-display-mode="none"] .smart-color-box {
    display: none;
}

.smart-color-picker[value-display-mode="colorBox"] .smart-color-input,
.smart-color-picker[value-display-mode="none"] .smart-color-input {
    display: none;
}

.smart-color-picker[value-display-mode="none"] .smart-action-button {
    padding: initial;
    border: none;
}

.smart-color-picker[value-display-mode="none"] .smart-drop-down-button {
    border-top-left-radius: var(--smart-border-top-left-radius);
    border-bottom-left-radius: var(--smart-border-bottom-left-radius);
    border-left-width: var(--smart-border-width);
    border-left-style: solid;
}

.smart-color-picker[value-display-mode="none"]:not([opened]):not([drop-down-open-mode="dropDownButton"]) .smart-drop-down-button {
    border-left-color: var(--smart-border);
}

.smart-color-picker[value-display-mode="text"] .smart-color-box,
.smart-color-picker[value-display-mode="colorBox"] .smart-color-input,
.smart-color-picker[value-display-mode="none"] .smart-color-box,
.smart-color-picker[value-display-mode="none"] .smart-color-input {
    display: none;
}

.smart-color-picker[value-display-mode="colorBox"] .smart-color-box,
.smart-color-picker[value-display-mode="text"] .smart-color-input {
    display: block;
}

.smart-color-picker[editable] .smart-action-button {
    cursor: initial;
}

.smart-color-picker[editable]:not([opened]):not([drop-down-open-mode="dropDownButton"])[hover] .smart-action-button {
    background: var(--smart-background);
    color: var(--smart-background-color);
}

.smart-color-picker:not([editable]) .smart-color-input {
    cursor: pointer;
    user-select: none;
}

.smart-color-picker[opened][editable] .smart-action-button {
    background-color: var(--smart-backgroud);
    color: var(--smart-background-color);
}

.smart-drop-down-container smart-color-panel {
    color: inherit;
}