*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/*----- REMOVE BLUE HIGHLIGHT ON TOUCH -----*/
*:hover,
*:focus,
*:focus-visible,
*:active {
  -webkit-tap-highlight-color: transparent;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

:root {
  --gray-0: hsl(212, 10%, 95%);
  --gray-1: hsl(212, 10%, 90%);
  --gray-2: hsl(212, 10%, 85%);
  --gray-3: hsl(212, 10%, 80%);
  --gray-4: hsl(212, 10%, 75%);
  --gray-5: hsl(212, 10%, 70%);
  --gray-6: hsl(212, 10%, 65%);
  --gray-7: hsl(212, 10%, 60%);
  --gray-8: hsl(212, 10%, 55%);
  --gray-9: hsl(212, 10%, 50%);
  --gray-10: hsl(212, 10%, 45%);
  --gray-11: hsl(212, 10%, 40%);
  --gray-12: hsl(212, 10%, 35%);
  --gray-13: hsl(212, 10%, 30%);
  --gray-14: hsl(212, 10%, 25%);
  --gray-15: hsl(212, 10%, 20%);
  --gray-16: hsl(212, 10%, 15%);
  --gray-17: hsl(212, 10%, 10%);
  --gray-18: hsl(212, 10%, 7%);

  --body-bg: var(--gray-0);
  --white: #ffffff;
  --text: var(--gray-18);

  --selection: rgba(0, 0, 255, 0.25);

  --dialog-border: transparent;

  --focus-border: blue;
  --focus-outline: rgba(0, 0, 255, 0.25);

  --error-border: red;
  --error-outline: rgba(255, 0, 0, 0.25);

  --icon-button-hover: var(--gray-1);
  --icon-button-active: rgba(128, 128, 255, 0.25);
  --icon-button-ah: rgba(128, 128, 255, 0.5);

  --tulip-border: var(--gray-1);
  --tulip-bg: #ffffff;

  --incr-bg: var(--gray-1);
  --incr-btn-hov: var(--gray-1);

  --box-shadow: rgba(23, 25, 28, 0.2);

  /*----- Colors -----*/
  --main-swatch: var(--gray-3);
  /*-- Red --*/
  --r-range-1: inherit;
  --r-range-2: inherit;
  --rgb-thumb: inherit;
  /*-- Blue --*/
  --b-range-1: inherit;
  --b-range-2: inherit;
  /*-- Green --*/
  --g-range-1: inherit;
  --g-range-2: inherit;
  /*-- Hue --*/
  --h-thumb: inherit;
  /*-- Sat --*/
  --s-range-1: inherit;
  --s-range-2: inherit;
  --s-thumb: inherit;
  /*-- Lum --*/
  --l-range-1: inherit;
  --l-range-2: inherit;
  --l-range-3: inherit;
  --l-thumb: inherit;

}

:root.dark {
  --gray-18: hsl(212, 10%, 95%);
  --gray-17: hsl(212, 10%, 90%);
  --gray-16: hsl(212, 10%, 85%);
  --gray-15: hsl(212, 10%, 80%);
  --gray-14: hsl(212, 10%, 75%);
  --gray-13: hsl(212, 10%, 70%);
  --gray-12: hsl(212, 10%, 65%);
  --gray-11: hsl(212, 10%, 60%);
  --gray-10: hsl(212, 10%, 55%);
  --gray-9: hsl(212, 10%, 50%);
  --gray-8: hsl(212, 10%, 45%);
  --gray-7: hsl(212, 10%, 40%);
  --gray-6: hsl(212, 10%, 35%);
  --gray-5: hsl(212, 10%, 30%);
  --gray-4: hsl(212, 10%, 25%);
  --gray-3: hsl(212, 10%, 20%);
  --gray-2: hsl(212, 10%, 15%);
  --gray-1: hsl(212, 10%, 10%);
  --gray-0: hsl(212, 10%, 7%);

  --main-00: rgb(250, 250, 255);
  --main-10: rgb(235, 235, 255);
  --main-20: rgb(217, 217, 255);
  /* initial color */
  --main-30: rgb(204, 204, 255);
  --main-40: rgb(189, 189, 255);
  --main-50: rgb(173, 173, 255);
  --main-60: rgb(158, 158, 255);
  --main-70: rgb(143, 143, 255);
  --main-80: rgb(128, 128, 255);
  --main-90: rgb(112, 112, 255);
  --main-100: rgb(97, 97, 255);
  --main-110: rgb(82, 82, 255);
  --main-120: rgb(66, 66, 255);
  --main-130: rgb(46, 46, 255);
  --main-140: rgb(20, 20, 255);
  --main-150: rgb(0, 0, 240);
  --main-160: rgb(0, 0, 214);
  --main-170: rgb(0, 0, 189);
  --main-180: rgb(0, 0, 163);
  --main-190: rgb(0, 0, 133);
  --main-200: rgb(0, 0, 97);
  --main-210: rgb(0, 0, 41);

  --error-00: rgb(255, 250, 250);
  --error-10: rgb(255, 229, 229);
  --error-20: rgb(255, 209, 209);
  --error-30: rgb(255, 189, 189);
  /* initial color */
  --error-40: rgb(255, 168, 168);
  --error-50: rgb(255, 148, 148);
  --error-60: rgb(255, 128, 128);
  --error-70: rgb(255, 107, 107);
  --error-80: rgb(255, 82, 82);
  --error-90: rgb(255, 51, 51);
  --error-100: rgb(250, 0, 0);
  --error-110: rgb(230, 0, 0);
  --error-120: rgb(214, 0, 0);
  --error-130: rgb(194, 0, 0);
  --error-140: rgb(173, 0, 0);
  --error-150: rgb(158, 0, 0);
  --error-160: rgb(143, 0, 0);
  --error-170: rgb(128, 0, 0);
  --error-180: rgb(112, 0, 0);
  --error-190: rgb(92, 0, 0);
  --error-200: rgb(71, 0, 0);
  --error-210: rgb(46, 0, 0);

  --body-bg: var(--gray-1);
  --white: var(--gray-2);
  --text: var(--gray-16);

  --selection: rgba(128, 128, 255, 0.50);

  --dialog-border: var(--gray-5);

  --focus-border: rgba(128, 128, 255, 1);
  --focus-outline: rgba(128, 128, 255, 0.25);

  --error-border: rgba(255, 82, 82, 1);
  --error-outline: rgba(255, 82, 82, 0.25);

  --icon-button-hover: var(--gray-4);
  --icon-button-active: rgba(128, 128, 255, 0.25);
  --icon-button-ah: rgba(128, 128, 255, 0.5);

  --tulip-border: var(--gray-5);
  --tulip-bg: var(--gray-2);

  --incr-bg: var(--gray-1);
  --incr-btn-hov: var(--gray-4);

  --box-shadow: rgba(23, 25, 28, 0.4);


  /*----- Colors -----*/
  --main-swatch: var(--gray-15);
  /*-- Red --*/
  --r-range-1: inherit;
  --r-range-2: inherit;
  --rgb-thumb: inherit;
  /*-- Blue --*/
  --b-range-1: inherit;
  --b-range-2: inherit;
  /*-- Green --*/
  --g-range-1: inherit;
  --g-range-2: inherit;
  /*-- Hue --*/
  --h-thumb: inherit;
  /*-- Sat --*/
  --s-range-1: inherit;
  --s-range-2: inherit;
  --s-thumb: inherit;
  /*-- Lum --*/
  --l-range-1: inherit;
  --l-range-2: inherit;
  --l-range-3: inherit;
  --l-thumb: inherit;
}

html,
body {
  height: 100%;
}

body {
  /* --font: 'Mulish', sans-serif; */
  --font: 'Inter', sans-serif;
  font-family: var(--font);
  font-optical-sizing: auto;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "slnt" 0;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  background-color: var(--body-bg);
}

::selection {
  background: var(--selection);
}

/*----- PREVENT SCROLL WHEN DIALOG IS OPEN -----*/
/* body:has(dialog[open]) {
  overflow: hidden;
} */

/* REMOVE POINTER EVENTS ON ICONS */
i {
  pointer-events: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font);
  margin-bottom: 0.5em;
  line-height: 1.25em;
}

h1 {
  font-size: 2.625rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.375rem;
}

h4 {
  font-size: 1.125rem;
}

p:not(:last-child) {
  margin-bottom: 1.5em;
}

a {
  font-weight: 600;
  text-decoration: none;
}

a:focus-visible {
  outline: 1px solid black;
  border-radius: 0.125rem;
}

button,
input[type="button"],
input[type="submit"] {
  padding: 0.625rem 0.75rem;
  font-family: var(--font);
  font-optical-sizing: auto;
  font-size: 0.875rem;
  font-weight: 600;
  font-style: normal;
  font-variation-settings: "slnt" 0;
  -webkit-font-smoothing: antialiased;
}

/* REMOVE POINTER EVENTS ON BUTTON TEXT/ICONS */
/* THIS MIGHT BE A BAD IDEA */
/* button>* {
  pointer-events: none;
} */

.fill-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.375rem;
  color: var(--white);
  border: 0px solid transparent;
  border-radius: 0.375rem;
  background-color: var(--gray-16);
  transition: background-color 150ms;
}

.fill-button i {
  font-size: 1.25rem;
}

.icon-button-balance {
  padding: 0.625rem 1rem 0.625rem 0.75rem;
}

/* REMOVE POINTER EVENTS ON BUTTON TEXT/ICONS */

input,
textarea {
  padding: 0.375rem 0.5rem;
  font-family: var(--font);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "slnt" 0;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  border-radius: 0.375rem;
  border: 1px solid var(--gray-6);
  outline: 3px solid transparent;
  background-color: var(--white);
  transition: border, outline, 150ms;
}

input:focus-visible,
textarea:focus-visible {
  border: 1px solid var(--focus-border);
  outline: 3px solid var(--focus-outline);
}

input.error,
textarea.error {
  border: 1px solid var(--error-border);
  outline: 3px solid var(--error-outline);
}

fieldset {
  margin: 0;
  padding: 0;
  width: 100%;
  border: 0;
}

.input-group {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.input-cont {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  position: relative;
}

.input-cont-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.label-text {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text);
  text-transform: uppercase;
}

.input-error-message {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.375rem;
  position: absolute;
  top: calc(100% + 0.375rem);
  padding: 0.375rem 0.75rem 0.375rem 0.5rem;
  width: max-content;
  max-width: min(90vw, 25ch);
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #0e0404;
  background-color: hsl(0, 100%, 70%);
}

.input-error-message i {
  font-size: 1.125rem;
  fill: #0e0404;
}






main {
  display: grid;
  grid-template-columns: 1fr 18rem;
  position: relative;
  /* min-height: 100%; */
}

.logomark {
  width: 2.5rem;
}

.logomark-shape {
  stroke: var(--gray-17);
  stroke-width: 1rem;
  fill: none;
  /* fill: var(--main-swatch); */
  fill-rule: nonzero;
}

#swatch-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  padding: 1rem;
  /* min-height: 100%; */
}

.panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

#swatch-panel {
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
  background-color: var(--white);
}

.icon-button,
.swatch-view-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0.25rem;
  border: 0px solid transparent;
  border-radius: 0.375rem;
  font-size: 1.5rem;
  color: var(--text);
  background-color: transparent;
  transition: background-color 150ms;
}

.icon-button.active,
.swatch-view-button.active {
  background-color: var(--icon-button-active);
}

#swatchContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0rem;
  width: 100%;
}

#swatchContainer.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0rem;
  width: 100%;
}

#swatchContainer.row .swatch-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-height: 3.5rem;
}

#swatchContainer.row .swatch-copy-container {
  margin-top: 0rem;
}

#swatchContainer.column {
  display: flex;
  width: 100%;
  height: 100%;
}

#swatchContainer.column .swatch-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0.5rem;
  min-height: 6rem;
  width: 100%;
  border-radius: 0rem;
  overflow: hidden;
}


#swatchContainer.column .swatch-copy-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: auto;
  width: auto;
  writing-mode: vertical-rl;
  white-space: nowrap;
  overflow: visible;
}

#swatchContainer.hide-info .input-color-check,
#swatchContainer.hide-info .swatch-copy-button,
#swatchContainer.hide-info .swatch-label {
  opacity: 0;
  visibility: hidden;
}

#swatchContainer.gap {
  gap: 0.5rem;
}

#swatchContainer.gap .swatch-item {
  border-radius: 0.5rem;
}

.swatch-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0.5rem;
  min-height: 6rem;
  border-radius: 0rem;
}

.input-color-check {
  /* align-self: flex-end; */
  padding: 0.25rem;
  font-size: 1.5rem;
  opacity: 0.6;
  transition: opacity 150ms;
}

.swatch-copy-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: auto;
  width: 100%;
}

.swatch-copy-button-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}


.swatch-copy-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0.25rem;
  border: 0px solid transparent;
  border-radius: 0.375rem;
  font-size: 1.5rem;
  background-color: transparent;
  opacity: 0.6;
  transition: opacity 150ms;
}





.swatch-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-right: auto;
  padding: 0.25rem 0.5rem;
  border: 0px solid transparent;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 500;
  background-color: transparent;
  opacity: 0.6;
  transition: opacity 150ms;
}






#controls-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  position: sticky;
  top: 0;
  padding: 1rem;
  height: 100vh;
  /* border: 1px solid var(--gray-1); */
  /* overflow-x: auto; */
  /* overflow-y: auto; */
  background-color: var(--white);
  scrollbar-width: auto;
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
  #controls-panel {
    scrollbar-width: thin;
  }
}


#color-panel,
#shade-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  background-color: var(--white);
}

#shade-count {
  padding: 0.625rem;
  font-size: 0.875rem;
  line-height: 1em;
  border-radius: 0.375rem;
  background-color: var(--icon-button-active);
}

#colorPreview {
  width: 100%;
  height: auto;
  /* aspect-ratio: 5 / 3; */
  aspect-ratio: 5 / 2;
  border-radius: 0.375rem;
  background-color: var(--gray-2);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.panel-header i {
  font-size: 1rem;
}

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

.hex-input {
  width: 100%;
}

.slider {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border: 0px solid transparent;
  border-radius: 0.375rem;
  -webkit-appearance: none;
}

.slider::-moz-range-track {
  height: 100%;
  border-radius: 0.375rem;
  background-color: var(--gray-1);
  /* background-color: var(--r-range-2); */
}

.slider::-webkit-slider-runnable-track {
  height: 31px;
  border-radius: 0.375rem;
  background-color: var(--gray-1);
  /* background-color: var(--r-range-2); */
}

.slider::-moz-range-thumb {
  border: 2px solid var(--gray-15);
  outline: 1px solid var(--white);
  outline-offset: -3px;
  height: 100%;
  width: 1rem;
  border-radius: 0.375rem;
  background-color: transparent;
}

.slider::-webkit-slider-thumb {
  border: 2px solid var(--gray-15);
  outline: 1px solid var(--white);
  outline-offset: -3px;
  height: 100%;
  width: 1rem;
  border-radius: 0.375rem;
  background-color: transparent;
  -webkit-appearance: none;
}

#r-slider::-moz-range-track {
  background: linear-gradient(90deg, var(--r-range-1, rgb(0, 0, 0) 0%), var(--r-range-2, rgb(255, 0, 0) 100%))
}

#r-slider::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--r-range-1, rgb(0, 0, 0) 0%), var(--r-range-2, rgb(255, 0, 0) 100%))
}

#r-slider::-moz-range-thumb {
  background-color: var(--rgb-thumb);
}

#r-slider::-webkit-slider-thumb {
  background-color: var(--rgb-thumb);
}

#g-slider::-moz-range-track {
  background: linear-gradient(90deg, var(--g-range-1, rgb(0, 0, 0) 0%), var(--g-range-2, rgb(0, 255, 0) 100%))
}

#g-slider::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--g-range-1, rgb(0, 0, 0) 0%), var(--g-range-2, rgb(0, 255, 0) 100%))
}

#g-slider::-moz-range-thumb {
  background-color: var(--rgb-thumb);
}

#g-slider::-webkit-slider-thumb {
  background-color: var(--rgb-thumb);
}

#b-slider::-moz-range-track {
  background: linear-gradient(90deg, var(--b-range-1, rgb(0, 0, 0) 0%), var(--b-range-2, rgb(0, 0, 255) 100%))
}

#b-slider::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--b-range-1, rgb(0, 0, 0) 0%), var(--b-range-2, rgb(0, 0, 255) 100%))
}

#b-slider::-moz-range-thumb {
  background-color: var(--rgb-thumb);
}

#b-slider::-webkit-slider-thumb {
  background-color: var(--rgb-thumb);
}




#h-slider::-moz-range-track {
  background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 255, 0, 1) 16.66%, rgba(0, 255, 0, 1) 33.32%, rgba(0, 255, 255, 1) 49.98%, rgba(0, 0, 255, 1) 66.64%, rgba(255, 0, 255, 1) 83.3%, rgba(255, 0, 0, 1) 100%);
}

#h-slider::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 255, 0, 1) 16.66%, rgba(0, 255, 0, 1) 33.32%, rgba(0, 255, 255, 1) 49.98%, rgba(0, 0, 255, 1) 66.64%, rgba(255, 0, 255, 1) 83.3%, rgba(255, 0, 0, 1) 100%);
}

#h-slider::-moz-range-thumb {
  background-color: var(--h-thumb);
}

#h-slider::-webkit-slider-thumb {
  background-color: var(--h-thumb);
}

#s-slider::-moz-range-track {
  background: linear-gradient(90deg, var(--s-range-1, hsl(240, 0%, 62%) 0%), var(--s-range-2, hsl(240, 100%, 62%) 100%));
}

#s-slider::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--s-range-1, hsl(240, 0%, 62%) 0%), var(--s-range-2, hsl(240, 100%, 62%) 100%));
}

#s-slider::-moz-range-thumb {
  background-color: var(--s-thumb);
}

#s-slider::-webkit-slider-thumb {
  background-color: var(--s-thumb);
}

#l-slider::-moz-range-track {
  background: linear-gradient(90deg, var(--l-range-1, hsl(240, 50%, 0%) 0%), var(--l-range-2, hsl(240, 60%, 62%) 50%), var(--l-range-3, hsl(240, 50%, 100%) 100%));
}

#l-slider::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--l-range-1, hsl(240, 50%, 0%) 0%), var(--l-range-2, hsl(240, 60%, 62%) 50%), var(--l-range-3, hsl(240, 50%, 100%) 100%));
}

#l-slider::-moz-range-thumb {
  background-color: var(--l-thumb);
}

#l-slider::-webkit-slider-thumb {
  background-color: var(--l-thumb);
}

#rgb-inputs,
#hslInputs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

#rgb-inputs label,
#hslInputs label {
  min-width: 1ch;
}

.rgb-input,
.hslInput {
  width: 5ch;
  text-align: center;
}

.num-incr-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  /* padding: 0.25rem; */
  border: 1px solid var(--gray-6);
  outline: 3px solid transparent;
  border-radius: 0.375rem;
  /* background-color: var(--incr-bg); */
  transition: 150ms;
}

.num-incr-wrap:has(.num-incr:focus-visible) {
  border: 1px solid var(--focus-border);
  outline: 3px solid var(--focus-outline);
}

.num-incr-wrap.error:has(.num-incr:focus-visible),
.num-incr-wrap.satshift-error:has(.num-incr:focus-visible) {
  border: 1px solid var(--error-border);
  outline: 3px solid var(--error-outline);
}

.num-incr-wrap.error,
.num-incr-wrap.satshift-error {
  border: 1px solid var(--error-border);
  outline: 3px solid var(--error-outline);
}

.num-incr {
  padding: 0rem;
  width: 5ch;
  text-align: center;
  border: 0px solid transparent;
  border-radius: 0rem;
  background-color: transparent;
  transition: background-color 0ms;
}

.num-incr:focus-visible {
  border: 0px solid transparent;
  outline: 0px solid transparent;
}

.incr-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;
  border: 0px solid transparent;
  border-radius: 0.375rem;
  background-color: transparent;
  transition: 150ms;
}

.incr-button:active {
  background-color: var(--incr-btn-hov);
}

.incr-button i {
  font-size: 0.75rem;
  color: var(--text);
}



.inputs-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
}










#export-share {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: auto;
  width: 100%;
  background-color: var(--white);
}

.export-share-content {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  width: 100%;
}

.export-share-buttons {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
}








dialog {
  margin: auto;
  padding: 0rem;
  /* width: 100%; */
  max-width: 30rem;
  border: 1px solid var(--dialog-border);
  border-radius: 0.75rem;
  background-color: var(--white);
  /* box-shadow: 0px 3px 6px -3px rgba(23, 25, 28, 0.2); */
  transition: 150ms;
}

dialog::backdrop {
  background-color: rgba(23, 25, 28, 0.6);
}

#dialog-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  padding: 1rem;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}

.dialog-title {
  font-weight: 600;
  color: var(--text);
}

.export-shades-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
}


.color-name {
  width: 100%;
  max-width: 16rem;
}

.css-variables {
  width: 100%;
  max-width: 24rem;
  height: 16rem;
  overscroll-behavior-y: contain;
}

.url-input {
  width: 100%;
  max-width: 16rem;
}

/* .copy-shade-buttons>button {
  width: 100%;
} */











/*---------- Tulip Setup Styles ----------*/

.tulip {
  position: relative;
}

.tulip-wrap {
  display: block;
  position: absolute;
  width: 0;
  max-width: min(90vw, 25ch);
  /* max-width is the only value you should change */
  height: auto;
  transition-property: opacity visibility transform;
  visibility: hidden;
  opacity: 0;
  overflow: clip;
  z-index: 10;
}

.tulip-wrap.show {
  visibility: visible;
  opacity: 1;
  overflow: visible;
}

/*---------- Tulip Text Styles ----------*/

.tulip-text {
  display: block;
  position: relative;
  padding: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.3em;
  color: var(--text);
  border: 1px solid var(--tulip-border);
  border-radius: 0.5rem;
  background-color: var(--tulip-bg);
  box-shadow: 0px 3px 9px -3px var(--box-shadow);
}








#view-panel {
  display: none;
}

.menu-nav {
  display: none;
  background-color: var(--white);
}







/* when hover is supported */
@media (hover: hover) {
  .fill-button:hover {
    background-color: var(--gray-14);
  }

  .icon-button:hover,
  .swatch-view-button:hover {
    background-color: var(--icon-button-hover);
  }

  .icon-button.active:hover,
  .swatch-view-button.active:hover {
    background-color: var(--icon-button-ah);
  }

  .swatch-copy-button:hover,
  .swatch-label:hover {
    opacity: 1;
  }

  .slider:hover {
    cursor: pointer;
  }

  .incr-button:hover {
    background-color: var(--incr-btn-hov);
  }



}




@media (max-width: 640px) {

  html {
    overscroll-behavior: none;
  }

  .input-cont-inline {
    width: 100%;
  }

  main {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
  }

  #swatch-section {
    gap: 0.5rem;
    padding: 0.5rem;
  }

  .swatch-copy-button,
  .swatch-label {
    opacity: 1;
  }

  .panel-row {
    display: none;
  }

  #controls-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* flex-wrap: wrap; */
    gap: 0rem;
    position: sticky;
    /* position: fixed; */
    bottom: 0;
    margin-inline: auto;
    /* margin-bottom: 0.75rem; */
    padding: 0rem;
    width: 100%;
    height: auto;
    background-color: transparent;

    box-shadow: 0px -6px 15px -3px var(--box-shadow);

    z-index: 10;
  }

  /* #color-panel,
  #shade-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    background-color: var(--white);
  } */

  #color-panel,
  #shade-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
  }

  #colorPreview {
    width: 100%;
    height: 5rem;
    /* aspect-ratio: 12 / 2; */
    border-radius: 0.375rem;
    background-color: var(--gray-2);
  }

  #shade-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
  }

  #shade-panel .inputs-wrapper {
    width: 100%;
  }

  #shade-panel .num-incr-wrap {
    justify-content: space-between;
    width: 100%;
  }

  #shade-panel .input-cont-inline {
    gap: 1rem;
  }

  #shade-panel .input-cont {
    flex-grow: 1;
    width: 100%;
    /* background-color: red; */
  }

  .export-share-content {
    display: flex;
    padding: 1rem;
  }

  .export-content,
  .share-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    width: 100%;
  }

  .export-content-title,
  .share-content-title {
    font-weight: 600;
  }

  .color-name {
    max-width: 100%;
  }

  .css-variables {
    max-width: 100%;
    height: 10rem;
    overscroll-behavior-y: contain;
  }

  .url-input {
    flex-grow: 1;
    max-width: 100%;
  }

  .export-share-buttons {
    display: none;
  }





  #view-panel {
    align-self: flex-end;
    display: flex;
    /* flex-direction: column; */
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem;
    width: 100%;
    background-color: var(--white);
  }

  #swatch-panel {
    display: none;
  }

  .swatch-view-button {
    font-size: 1.75rem;
  }

  .menu-nav {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 1rem;
    width: 100%;
    list-style: none;
    border-top: 1px solid var(--tulip-border);
  }

  .menu-button {
    font-size: 1.75rem;
  }

  .menu-button.open {
    background-color: var(--icon-button-active);
  }

  .logomark {
    width: 2rem;
  }

  #controls-panel .tab-content {
    display: none;
  }

  #controls-panel .tab-content.open {
    display: flex;
  }

}




@media (max-width: 370px) {
  #shade-panel {
    flex-direction: column;
  }

  #shade-panel .input-cont-inline {
    flex-direction: row;
  }
}