.setup__content-outer {
  width: var(--swatch-11);
  overflow-x: hidden;
}

.setup__content {
  width: calc(var(--swatch-11) * 3);
  display: flex;
  transition: 0.5s transform;
}

[data-navigation="scheme"] .setup__content {
  transform: translateX(0);
}

[data-navigation="palette"] .setup__content {
  transform: translateX(calc(var(--swatch-11) * -1));
}

[data-navigation="color"] .setup__content {
  transform: translateX(calc(var(--swatch-11) * -2));
}


.setup__palette-editor {
  width: var(--swatch-11);
}

.setup__scheme-editor {
  width: var(--swatch-9);
  padding: var(--swatch);
}

.setup__edit-color {
  padding: var(--swatch);
  width: var(--swatch-9);
}


.setup__edit-palette {
  padding: 2rem var(--swatch) var(--swatch) var(--swatch);
  width: var(--swatch-9);
}

.setup__section {
  margin-bottom: 2rem;
  width: var(--swatch-9);
}

.setup__title {
  color: #333;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.setup__title-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.setup__bg--100 { background-color: var(--color-100); }
.setup__bg--200 { background-color: var(--color-200); }
.setup__bg--300 { background-color: var(--color-300); }
.setup__bg--400 { background-color: var(--color-400); }
.setup__bg--500 { background-color: var(--color-500); }
.setup__bg--600 { background-color: var(--color-600); }
.setup__bg--700 { background-color: var(--color-700); }
.setup__bg--800 { background-color: var(--color-800); }
.setup__bg--900 { background-color: var(--color-900); }





/* ------------------------- */


.color-contrast {
  display: flex;
}

.color-contrast__list {
  width: 25%;
}

.color-contrast__title {
  width: 100%;
  text-align: center;  
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  background-color: var(--color-focused);
}

.color-contrast__title--white {
  color: white;
}

.color-contrast__title--black {
  color: black;
}

.color-contrast__title--normal {
  font-size: 0.875rem;
}

.color-contrast__title--large {
  font-weight: bold;
  font-size: 1.1875rem;
}

.color-contrast__content {
  width: 100%;
  text-align: center;
  font-size: 0.875rem;
  padding-top: 0.75rem;
  height: 1.5rem;
  padding-bottom: 0.6875rem;
  border-bottom: 0.0625rem solid #D1D1D1;
}



/* ------------------------- */



.color-details {
  font-size: 0.875rem;
}

.color-details__title,
.color-details__content {
  padding-top: 1rem;
  padding-bottom: 0.4375rem;
  float: left;
  border-bottom: 0.0625rem solid #D1D1D1;
}

.color-details__title {
  clear: left;
  width: 20%;
  font-weight: bold;
}

.color-details__content {
  width: 80%;
}


/* ------------------------- */


.palette__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.palette__refresh-button {
  background: none;
  font-size: 0.875rem;
  border: none;
  padding: 0;
  line-height: 1.5rem;
  color: #777;
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 0.25rem;
  cursor: pointer;
}

.palette__refresh-button:hover {
  color: #333;
}

.palette__refresh-button:focus {
  outline: none;
}

.palette__refresh-icon {
  fill: #777;
  height: 1.5rem;
  width: 1.5rem;
  margin-left: 0.25rem;
}

.palette__refresh-button:hover .palette__refresh-icon {
  fill: #333;
}

.palette__swatches {
  display: flex;
}

.palette__swatch {
  width: var(--swatch);
  height: var(--swatch);
}



.palette__label {
  display: block;
  height: var(--swatch);
  width: var(--swatch);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}


.palette__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--swatch);
  height: var(--swatch);
  background-color: transparent;
  transition: 0.3s background-color;
  display: flex;
  justify-content: center;
  align-items: center;
}


.palette__checkbox:checked ~ .palette__overlay {
  background-color: #fff;
}

.palette__checkbox {
  margin-top: var(--swatch);
  visibility: hidden;
}


/* ------------------------- */

.setup__colorcircle {
  width: 14rem;
  height: 14rem;
  margin: 3rem auto 0 auto;
  position: relative;
  clip-path: path("M224 112a112 112 0 11-224 0 112 112 0 01224 0zm-199 0a87 87 0 10174 0 87 87 0 00-174 0z");
  background: conic-gradient(from 0deg at 50% 50%, 
    hsl(0 100% 50%) 0deg,
    hsl(22.5 100% 50%) 022.5deg,
    hsl(45 100% 50%) 45deg,
    hsl(67.5 100% 50%) 67.5deg,
    hsl(90 100% 50%) 90deg,
    hsl(112.5 100% 50%) 112.5deg,
    hsl(135 100% 50%) 135deg,
    hsl(157.5 100% 50%) 157.5deg,
    hsl(180 100% 50%) 180deg,
    hsl(202.5 100% 50%) 202.5deg,
    hsl(225 100% 50%) 225deg,
    hsl(247.5 100% 50%) 247.5deg,
    hsl(270 100% 50%) 270deg,
    hsl(292.5 100% 50%) 292.5deg,
    hsl(315 100% 50%) 315deg,
    hsl(337.5 100% 50%) 337.5deg,
    hsl(360 100% 50%) 360deg);
}

.setup__colorcircle-marker {
  height: 14rem;
  width: 2rem;
  position: absolute;
  top: 0;
  left: calc(50% - 1rem);
}


.setup__colorcircle-marker > span {
  width: 1em;
  height: 1em;
  display: block;
  margin: 0.25rem auto 0 auto;
  background: black;
  border-radius: 0.5rem;
}

.setup__colorcircle-marker--1 { transform: rotate(calc(var(--p1-hue) * 1deg)); }
.setup__colorcircle-marker--2 { transform: rotate(calc(var(--p2-hue) * 1deg)); }
.setup__colorcircle-marker--3 { transform: rotate(calc(var(--p3-hue) * 1deg)); }
.setup__colorcircle-marker--4 { transform: rotate(calc(var(--p4-hue) * 1deg)); }

[data-palettes="1"] .setup__colorcircle-marker--2,
[data-palettes="1"] .setup__colorcircle-marker--3,
[data-palettes="1"] .setup__colorcircle-marker--4,
[data-palettes="2"] .setup__colorcircle-marker--3,
[data-palettes="2"] .setup__colorcircle-marker--4,
[data-palettes="3"] .setup__colorcircle-marker--4 {
  display: none;
}

[data-palettes="1"] .setup__section--hue-palette-2,
[data-palettes="1"] .setup__section--hue-palette-3,
[data-palettes="1"] .setup__section--hue-palette-4,
[data-palettes="2"] .setup__section--hue-palette-3,
[data-palettes="2"] .setup__section--hue-palette-4,
[data-palettes="3"] .setup__section--hue-palette-4 {
  display: none;
}

[data-palettes="1"] #button--palette-2,
[data-palettes="1"] #button--palette-3,
[data-palettes="1"] #button--palette-4,
[data-palettes="2"] #button--palette-3,
[data-palettes="2"] #button--palette-4,
[data-palettes="3"] #button--palette-4 {
  display: none;
}



/* ------------------------- */


.setup__navigation {
  width: var(--swatch-2);
  overflow-x: hidden;
  background-color: #f7f7f7;
  position: relative;
  --offset: 0;
}

[data-palettes="2"] .setup__navigation {
  --offset: calc(var(--swatch) * 1.25);
}
[data-palettes="3"] .setup__navigation {
  --offset: calc(var(--swatch) * 2.5);
}
[data-palettes="4"] .setup__navigation {
  --offset: calc(var(--swatch) * 3.75);
}

.setup__navigation-marker {
  z-index: 1;
  position: absolute;
  top: calc(var(--swatch) / 4);
  left: calc(var(--swatch) / 4);
  background: white;
  border: 1px solid black;
  transition: transform 0.3s;
  box-sizing: border-box;
  width: calc(var(--swatch) * 1.5);
  height: calc(var(--swatch) * 1.25);
}


[data-navigation="scheme"] .setup__navigation-marker {
  transform: translateY(0);
}

[data-navigation="palette"][data-palette="1"] .setup__navigation-marker {
  transform: translateY(calc(var(--swatch) * 1.5));
}
[data-navigation="palette"][data-palette="2"] .setup__navigation-marker {
  transform: translateY(calc(var(--swatch) * 2.75));
}
[data-navigation="palette"][data-palette="3"] .setup__navigation-marker {
  transform: translateY(calc(var(--swatch) * 4));
}
[data-navigation="palette"][data-palette="4"] .setup__navigation-marker {
  transform: translateY(calc(var(--swatch) * 5.25));
}

[data-navigation="color"] .setup__navigation-marker {
  margin-top: var(--offset);
}

[data-navigation="color"][data-active="900"] .setup__navigation-marker {
  transform: translateY(calc(var(--swatch) * 3));
}
[data-navigation="color"][data-active="800"] .setup__navigation-marker {
  transform: translateY(calc(var(--swatch) * 4.25));
}
[data-navigation="color"][data-active="700"] .setup__navigation-marker {
  transform: translateY(calc(var(--swatch) * 5.5));
}
[data-navigation="color"][data-active="600"] .setup__navigation-marker {
  transform: translateY(calc(var(--swatch) * 6.75));
}
[data-navigation="color"][data-active="500"] .setup__navigation-marker {
  transform: translateY(calc(var(--swatch) * 8));
}
[data-navigation="color"][data-active="400"] .setup__navigation-marker {
  transform: translateY(calc(var(--swatch) * 9.25));
}
[data-navigation="color"][data-active="300"] .setup__navigation-marker {
  transform: translateY(calc(var(--swatch) * 10.5));
}
[data-navigation="color"][data-active="200"] .setup__navigation-marker {
  transform: translateY(calc(var(--swatch) * 11.75));
}
[data-navigation="color"][data-active="100"] .setup__navigation-marker {
  transform: translateY(calc(var(--swatch) * 13));
}


.setup__navigation-menu {
  position: relative;
  z-index: 2;
  margin: calc(var(--swatch) / 2);
}

.setup__navigation-button {
  display: block;
  border: none;
  padding: 0;
  width: var(--swatch);
  height: calc(var(--swatch) * 0.75);
  overflow: hidden;
  margin-bottom: calc(var(--swatch) / 2);
  transition: 0.2s transform;
  box-sizing: border-box;
}

.setup__navigation-button:hover {
  transform: scale(1.2);
}


.setup__navigation-button--color-scheme {
  margin-bottom: calc(var(--swatch) * 0.75);
  background: conic-gradient(from 0deg at 50% 50%, 
    hsl(0 100% 50%) 0deg,
    hsl(22.5 100% 50%) 022.5deg,
    hsl(45 100% 50%) 45deg,
    hsl(67.5 100% 50%) 67.5deg,
    hsl(90 100% 50%) 90deg,
    hsl(112.5 100% 50%) 112.5deg,
    hsl(135 100% 50%) 135deg,
    hsl(157.5 100% 50%) 157.5deg,
    hsl(180 100% 50%) 180deg,
    hsl(202.5 100% 50%) 202.5deg,
    hsl(225 100% 50%) 225deg,
    hsl(247.5 100% 50%) 247.5deg,
    hsl(270 100% 50%) 270deg,
    hsl(292.5 100% 50%) 292.5deg,
    hsl(315 100% 50%) 315deg,
    hsl(337.5 100% 50%) 337.5deg,
    hsl(360 100% 50%) 360deg);
}

.setup__navigation-button--palette-1 { 
    background: linear-gradient(180deg,
      var(--p1-color-900) 12.5%, 
      var(--p1-color-800) 12.5% 25%, 
      var(--p1-color-700) 25% 37.5%, 
      var(--p1-color-600) 37.5% 50%, 
      var(--p1-color-500) 50% 62.5%,
      var(--p1-color-400) 62.5% 75%, 
      var(--p1-color-300) 75% 87.5%,
      var(--p1-color-200) 87.5%);
}
.setup__navigation-button--palette-2 { 
    background: linear-gradient(180deg,
      var(--p2-color-900) 12.5%, 
      var(--p2-color-800) 12.5% 25%, 
      var(--p2-color-700) 25% 37.5%, 
      var(--p2-color-600) 37.5% 50%, 
      var(--p2-color-500) 50% 62.5%,
      var(--p2-color-400) 62.5% 75%, 
      var(--p2-color-300) 75% 87.5%,
      var(--p2-color-200) 87.5%);
}
.setup__navigation-button--palette-3 { 
    background: linear-gradient(180deg,
      var(--p3-color-900) 12.5%, 
      var(--p3-color-800) 12.5% 25%, 
      var(--p3-color-700) 25% 37.5%, 
      var(--p3-color-600) 37.5% 50%, 
      var(--p3-color-500) 50% 62.5%,
      var(--p3-color-400) 62.5% 75%, 
      var(--p3-color-300) 75% 87.5%,
      var(--p3-color-200) 87.5%);
}
.setup__navigation-button--palette-4 { 
    background: linear-gradient(180deg,
      var(--p4-color-900) 12.5%, 
      var(--p4-color-800) 12.5% 25%, 
      var(--p4-color-700) 25% 37.5%, 
      var(--p4-color-600) 37.5% 50%, 
      var(--p4-color-500) 50% 62.5%,
      var(--p4-color-400) 62.5% 75%, 
      var(--p4-color-300) 75% 87.5%,
      var(--p4-color-200) 87.5%);
}

.setup__navigation-button--palette-1, 
.setup__navigation-button--palette-2, 
.setup__navigation-button--palette-3, 
.setup__navigation-button--palette-4 { 
  opacity: 0.5;
}

[data-palette="1"] .setup__navigation-button--palette-1, 
[data-palette="2"] .setup__navigation-button--palette-2, 
[data-palette="3"] .setup__navigation-button--palette-3, 
[data-palette="4"] .setup__navigation-button--palette-4 { 
  opacity: 1;
}

.setup__navigation-button--900 {
  margin-top: calc(var(--swatch) * 0.75);
}

.setup__navigation-button--100 { border: 0.0625rem solid var(--color-200); }
.setup__navigation-button--200 { border: 0.0625rem solid var(--color-300); }
.setup__navigation-button--300 { border: 0.0625rem solid var(--color-400); }
.setup__navigation-button--400 { border: 0.0625rem solid var(--color-500); }
.setup__navigation-button--500 { border: 0.0625rem solid var(--color-600); }
.setup__navigation-button--600 { border: 0.0625rem solid var(--color-700); }
.setup__navigation-button--700 { border: 0.0625rem solid var(--color-800); }
.setup__navigation-button--800 { border: 0.0625rem solid var(--color-900); }



/* ------------------------- */


.setup__palette-number {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setup__palette-number .setup__title {
  margin-bottom: 0;
}

.setup__palette-number-button {
  border: 0;
  background-color: #EDEDED;
  color: #333;
  padding: 0.25rem 1rem;
  font-weight: bold;
  margin-right: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.setup__palette-number-button:last-child {
  margin-right: none;
}


.setup__palette-number-button:hover {
  background-color: #c2c2c2;
}

[data-palettes="1"] #button--palette-amount-1, 
[data-palettes="2"] #button--palette-amount-2, 
[data-palettes="3"] #button--palette-amount-3, 
[data-palettes="4"] #button--palette-amount-4 {
  background-color: #333;
  color: white;
}



/* ------------------------- */





.sliders-horizontal__slider-container {
  height: var(--swatch);
  width: var(--swatch-9);
}

.sliders-horizontal__slider-container--hue {
  background: hsl(var(--hue) calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%));
  background: linear-gradient(90deg, 
    hsl(0 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 0%,
    hsl(11.25 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 3.125%,
    hsl(22.50 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 6.25%,
    hsl(33.75 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 9.375%,
    hsl(45.00 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 12.5%,
    hsl(56.25 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 15.625%,
    hsl(67.50 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 18.75%,
    hsl(78.75 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 21.875%,
    hsl(90.00 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 25%,
    hsl(101.25 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 28.125%,
    hsl(112.50 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 31.25%,
    hsl(123.75 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 34.375%,
    hsl(135.00 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 37.5%,
    hsl(146.25 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 40.625%,
    hsl(157.50 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 43.75%,
    hsl(168.75 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 46.875%,
    hsl(180.00 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 50%,
    hsl(191.25 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 53.125%,
    hsl(202.50 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 56.25%,
    hsl(213.75 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 59.375%,
    hsl(225.00 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 62.5%,
    hsl(236.25 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 65.625%,
    hsl(247.50 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 68.75%,
    hsl(258.75 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 71.875%,
    hsl(270.00 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 75%,
    hsl(281.25 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 78.125%,
    hsl(292.50 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 81.25%,
    hsl(303.75 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 84.375%,
    hsl(315.00 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 87.5%,
    hsl(326.25 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 90.625%,
    hsl(337.50 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 93.75%,
    hsl(348.75 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 96.875%,
    hsl(360 calc(var(--saturation-500) * 1%) calc(var(--lightness-500) * 1%)) 100%);
} 

.sliders-horizontal__slider-container--hue-static {
  background: linear-gradient(90deg, 
    hsl(0 100% 50%) 0%,
    hsl(11.25 100% 50%) 3.125%,
    hsl(22.50 100% 50%) 6.25%,
    hsl(33.75 100% 50%) 9.375%,
    hsl(45.00 100% 50%) 12.5%,
    hsl(56.25 100% 50%) 15.625%,
    hsl(67.50 100% 50%) 18.75%,
    hsl(78.75 100% 50%) 21.875%,
    hsl(90.00 100% 50%) 25%,
    hsl(101.25 100% 50%) 28.125%,
    hsl(112.50 100% 50%) 31.25%,
    hsl(123.75 100% 50%) 34.375%,
    hsl(135.00 100% 50%) 37.5%,
    hsl(146.25 100% 50%) 40.625%,
    hsl(157.50 100% 50%) 43.75%,
    hsl(168.75 100% 50%) 46.875%,
    hsl(180.00 100% 50%) 50%,
    hsl(191.25 100% 50%) 53.125%,
    hsl(202.50 100% 50%) 56.25%,
    hsl(213.75 100% 50%) 59.375%,
    hsl(225.00 100% 50%) 62.5%,
    hsl(236.25 100% 50%) 65.625%,
    hsl(247.50 100% 50%) 68.75%,
    hsl(258.75 100% 50%) 71.875%,
    hsl(270.00 100% 50%) 75%,
    hsl(281.25 100% 50%) 78.125%,
    hsl(292.50 100% 50%) 81.25%,
    hsl(303.75 100% 50%) 84.375%,
    hsl(315.00 100% 50%) 87.5%,
    hsl(326.25 100% 50%) 90.625%,
    hsl(337.50 100% 50%) 93.75%,
    hsl(348.75 100% 50%) 96.875%,
    hsl(360 100% 50%) 100%);
} 

.sliders-horizontal__slider-container--active-saturation {
  background: hsl(var(--hue) calc(var(--saturation-focused) * 1%) calc(var(--lightness-focused) * 1%));
  background: linear-gradient(90deg, 
    hsl(var(--hue) 0% calc(var(--lightness-focused) * 1%)) 0%,
    hsl(var(--hue) 50% calc(var(--lightness-focused) * 1%)) 50%,
    hsl(var(--hue) 100% calc(var(--lightness-focused) * 1%)) 100%);
} 

.sliders-horizontal__slider-container--active-lightness {
  background: hsl(var(--hue) calc(var(--saturation-focused) * 1%) calc(var(--lightness-focused) * 1%));
  background: linear-gradient(90deg, 
    hsl(var(--hue) calc(var(--saturation-focused) * 1%) 0%) 0%,
    hsl(var(--hue) calc(var(--saturation-focused) * 1%) 50%) 50%,
    hsl(var(--hue) calc(var(--saturation-focused) * 1%) 100%) 100%);
} 



.sliders-horizontal__slider-input {
  width: var(--swatch-9);
  height: var(--swatch);
}



/* ------------------------- */



.sliders-vertical {
  display: flex;
}


.sliders-vertical__slider-container {
  height: 6.25rem;
  padding: 0.125rem 0;
  width: var(--swatch);
} 


.sliders-vertical__slider-input {
  transform: rotate(-90deg);
  transform-origin: 3.125rem 3.125rem;
  width: 6.25rem;
  height: var(--swatch);
} 


input[type=range] {
  background-color: transparent;
  -webkit-appearance: none;
}


input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  border: 0.0625rem solid #525252;
  height: 1rem;
  width: 1rem;
  border-radius: 0.5rem;
  background-color: #fff;
  -webkit-appearance: none;
  cursor: move;
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3);
}

input[type=range]::-moz-range-thumb {
  border: 0.0625rem solid #525252;
  height: 0.875rem;
  width: 0.875rem;
  border-radius: 0.5rem;
  background-color: #fff;
  cursor: move;
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3);
}




/* ------------------------- */




input[type=number] {
  text-align: center;
  width: 3rem;
  font-size: 0.875rem;
  line-height: 1.375rem;
  border: 0.0625rem solid transparent;
  background-color: #f7f7f7;
  color: #666;
  padding: 0;
}


input[type=number]:hover {
  border-color: #bbb;
}

input[type=number]:focus {
  outline: none;
  border-color: #333;
}

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

input[type=number] {
  -moz-appearance: textfield;
}