//
// _colorpicker.scss
//

.pcr-app {
    background: var(--#{$prefix}secondary-bg);
    box-shadow: var(--#{$prefix}box-shadow);
    border-radius: 4px;
    border: 1px solid var(--#{$prefix}border-color);

    .pcr-interaction {
        .pcr-type.active {
            background: var(--#{$prefix}primary)
        }

        .pcr-result {
            background-color: var(--#{$prefix}secondary-bg);
            color: var(--#{$prefix}body-color);
            border: 1px solid var(--#{$prefix}border-color);
            border-radius: .25rem
        }

        input {
            background-color: var(--#{$prefix}light);
            border-radius: 0.25rem !important;

            &:focus {
                box-shadow: none;
                background-color: var(--#{$prefix}secondary-bg);
                border-color: var(--#{$prefix}primary-border-subtle);
            }
        }

        .pcr-save {
            background: var(--#{$prefix}success) !important;
        }

        .pcr-clear,
        .pcr-cancel {
            background: var(--#{$prefix}danger) !important;
        }
    }
}

.pickr {
    .pcr-button {
        height: 36px;
        width: 150px;
        border-radius: .25rem;

        &::after,
        &::before {
            border-radius: .25rem
        }
    }
}

.pcr-app[data-theme=classic] {
    .pcr-selection {
        .pcr-color-preview {
            margin-right: .75em;
            margin-left: 0
        }

        .pcr-color-chooser,
        .pcr-color-opacity {
            margin-left: .75em;
            margin-right: 0
        }
    }
}

.pcr-app[data-theme=monolith] {
    .pcr-result {
        min-width: 100%
    }
}