@charset "UTF-8";

.rr-color-picker-root {
	font-size: 10px;
}
.rr-color-picker {
    pointer-events: auto;
    position: absolute;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: stretch;
    width: 25em;
	padding: .5em;
    background: #f2f2f2;
    border: 1px solid gray;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.9);
    outline: none;
}
/** hsl slider와 editor 사이에 줄이 나눠지도록 */
.rr-color-picker::before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    order: 1;
}
.rr-color-picker-slider {
	position: relative;
    width: 100%;
    margin: .5em;
    padding: 1em;
	background-image: linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);
    box-shadow: 0 0 0 1px silver;
    background-color: yellow;
}
.rr-color-picker-slider-selector {
	position: absolute;
	z-index: 1;
	display: block;
	transform: translate(-50%, -50%);
	border: 2px solid white;
	border-radius: 100%;
	box-shadow: 0 0 3px 1px #67b9ff;
	background-color: currentColor;
	cursor: pointer;
	padding: 1em;
	border-radius: 2px;
}
.rr-color-picker-hsl {
    position: relative;
    background-color: red;
    /* background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)), linear-gradient(to top, black, rgba(0, 0, 0, 0)); */
    background-image: linear-gradient(to bottom, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), linear-gradient(to right, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
	box-shadow: 0 0 0 1px silver;
    margin: .5em;
    flex: 1 1 auto;
}
.rr-color-picker-hsl::before {
    content: '';
    display: block;
    padding-bottom: 100%;
}
.rr-color-picker-hsl-selector {
	position: absolute;
	z-index: 1;
	display: block;
	padding: 1em;
	transform: translate(-50%, -50%);
	border: 2px solid white;
	border-radius: 100%;
	box-shadow: 0 0 3px 1px #67b9ff;
	background-color: currentColor;
	cursor: pointer;
}
.rr-color-picker-alpha-slider {
	position: relative;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgray'/%3E%3C/svg%3E") left top / contain white;
	box-shadow: 0 0 0 1px silver;
    margin: .5em;
    padding: .7em;
}
.rr-color-picker-alpha-selector {
	position: absolute;
	z-index: 1;
	display: block;
	transform: translate(-50%, -50%);
	border: 2px solid white;
	border-radius: 100%;
	box-shadow: 0 0 3px 1px #67b9ff;
	background-color: transparent;
	cursor: pointer;
	padding: 1em;
	border-radius: 2px;
}
.rr-color-picker-editor {
    order: 1;
    width: 6.5rem;
    margin: .5em;
}
.rr-color-picker-editor input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: none;
    box-shadow: 0 0 0 1px silver;
    outline: none;
    font-size: 1rem;
    font-family: monospace;
    padding: .2em .4em;
}
.rr-color-picker-result {
    position: relative;
    order: 1;
    flex: 1 1 auto;
    margin: .5em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgrey'/%3E%3C/svg%3E") left top/contain white;
    box-shadow: 0 0 0 1px silver;
}
.rr-color-picker-result::before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: currentColor;
}
.rr-color-picker-ok {
    order: 1;
    margin: .5em;
}
.rr-color-picker button {
    box-sizing: border-box;
    border: none;
    box-shadow: 0 0 0 1px silver;
    outline: none;
    padding: .4em .6em;
    cursor: pointer;
    font-size: 1rem;
    background-color: whitesmoke;
    background-image: linear-gradient(0deg, gainsboro, transparent);
    color: #333;
}