:root {
  /* colors */
  --clr-primary: #222831;
  --clr-secondary: #393e46;
  --clr-accent: #00adb5;
  --clr-white: #eeeeee;
  --clr-gray:rgb(74, 74, 74);
  /* extra colors */
  --clr-code-bg: #1e1e1e;
  --clr-active-shadow-list: #10161f;
  --clr-inactive-shadow-list: #1c2026;
  /* font family */
  --main-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  /* font sizes */
  --fs-small: 1rem;
  --fs-medium: 1.3rem;
  --fs-large: 1.5rem;
  /* font weights */
  --fw-normal: 400;
  --fw-bold: 600;
  --fw-extra-bold: 900;
  /* paddings */
  --pd-normal: 1em;
  --pd-large: 2em;
}

*,
html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@-moz-document url-prefix(){
  * {
    scrollbar-width:thin;
    scrollbar-color:var(--clr-accent) transparent;
  }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  *::-webkit-scrollbar {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color:transparent;
    height:0.3em;
    width:0.3em;
  }

  *::-webkit-scrollbar-corner {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance:none;
  }

  *::-webkit-scrollbar-thumb { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius:5px;
    background-color:var(--clr-accent);
  }
}


button,
select,
input[type="color"]{
  cursor:pointer;
}
button:active {
  background-color:var(--clr-gray);
}

body {
  font-family: var(--main-font);
  background-color:var(--clr-code-bg);
}

.github-project-link {
  display:inline-block;
  position: absolute;
  top:5px;
  right:0px;
}

.main-container {
 display:flex;
 flex-direction: column;  
}

.main-container__canvas {
  display: flex;
  flex-direction: column;
  border-bottom: 5px solid var(--clr-primary);
}

.canvas__box {
    height:33.3vh;
    max-width:100%;
    overflow:scroll;
    background-color:var(--clr-white);
    position:relative;
}

.canvas__box__element {
  height: 200px;
  width: 200px;
  margin:2.5em auto 2em auto;
  border-radius: 5px;
  background-color:#000000;
  transition:all 0.1s linear;
}

.canvas__design-inputs__list {
  padding: var(--pd-normal);
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3em;
  background-color: var(--clr-secondary);
}

.canvas__design-inputs__property {
  padding: 0.3em;
  color: var(--clr-white);
  text-transform:uppercase;
  display: flex;
  flex-direction:column;
  align-items:center;
  justify-content: center;
  gap: 0.3em;
  border-radius: 5px;
  border: 2px solid var(--clr-primary);
}
.canvas__design-inputs__property__range {
  display:flex;
  align-items:flex-start;
  justify-content: flex-start;
}

.canvas__design-range-inputs {
  -webkit-appearance: none;
  appearance:none;
  height:12px;
  width:100%;
  border-radius:5px;
  background-color:var(--clr-primary);
  position:relative;
  overflow:hidden;
}

.canvas__design-range-inputs::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance:none;
  height:12px;
  width:12px;
  background-color:var(--clr-primary);
  border:2px solid var(--clr-accent);
  border-radius:50%;
  box-shadow:-405px 2px 0px 400px var(--clr-accent);
  z-index:2;
}

.canvas__design-range-inputs::-moz-range-thumb  {
  -webkit-appearance: none;
  appearance:none;
  height:12px;
  width:12px;
  background-color:var(--clr-primary);
  border:2px solid var(--clr-accent);
  border-radius:50%;
  box-shadow:-405px 2px 0px 400px var(--clr-accent);
  z-index:2;
}

.canvas__design-inputs__value-text {
  color: var(--clr-white);
  width: 4ch;
  font-size: var(--fs-small);
  border: none;
  background-color: transparent;
}

.canvas__design-inputs__value-number {
  -moz-appearance: textfield;
  appearance: textfield;
  padding:0.3em;
  color: var(--clr-white);
  width: 4ch;
  font-size: var(--fs-small);
  border: none;
  background-color: transparent;
}

.canvas__design-inputs__value-number::-webkit-outer-spin-button,
.canvas__design-inputs__value-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
}

.canvas__design-inputs__unit {
  padding: 0.3em;
  color: var(--clr-white);
  text-transform: uppercase;
  border-radius: 2px;
  border: none;
  background-color: var(--clr-primary);
}

.canvas__design-inputs__value-color {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  width:100%;
  border: none;
  background-color: transparent;
}

.canvas__design-inputs__value-color::-webkit-color-swatch-wrapper {
  margin: 0;
  padding: 0;
}

.canvas__design-inputs__value-color::-webkit-color-swatch {
  margin: 0;
  padding: 0;
  border: none;
  border-radius:2px;
}

.shadow-list__head {
  padding: var(--pd-normal);
  display: flex;
  justify-content: space-between;
  border-bottom: 5px solid var(--clr-primary);
  background-color: var(--clr-secondary);
}

.shadow-list__head__title-dropdown {
  display: flex;
  gap: 0em 1em;
}

.shadow-list__head__title {
  color: var(--clr-white);
  font-size: var(--fs-medium);
  text-transform: uppercase;
}

.shadow-list__head__dropdown-btn {
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: none;
  background-color: var(--clr-primary);
  transform: rotate(180deg);
}

.shadow-list__head__dropdown-btn--active {
  transform:rotate(0deg);
}

.shadow-list__add-shadow-btn {
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: none;
  background-color: var(--clr-primary);
}

.shadow-list__shadows {
  display: none;
}

.shadow-list__shadows--active {
  display: flex;
  flex-direction: column;
  list-style-type: none;
}

.shadows__info {
  background-color: var(--clr-inactive-shadow-list);
  list-style-type:none;
}

.shadows__info--active {
  background-color: var(--clr-active-shadow-list);
  border-bottom:2px solid var(--clr-accent);
}

.shadows__info__name-options {
  padding: var(--pd-normal);
  display: flex;
  gap: 0em 1em;
}

.shadows__info__name {
  color: var(--clr-white);
  font-size: var(--fs-small);
  font-weight: var(--fw-normal);
  text-transform: capitalize;
}


.shadows__info__options__expand {
  margin-left:auto;
}


.shadows__info__options__expand,
.shadows__info__options__remove {
  height: 25px;
  width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background-color: var(--clr-primary);
  transform: rotate(180deg);
}

.options__expand__dropdown-icon,
.options__remove__minus-icon {
  pointer-events:none;
}

.shadows__info__options__expand--active {
  transform:rotate(0deg);
}

.shadows__property-inputs {
  display: none;
}

.shadows__property-inputs--active {
  padding: var(--pd-normal);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr);
  grid-template-areas:
  "x blur color"
  "y spread check";
  gap:0.3em;
  list-style-type: none;
}

.shadows__property-inputs__info {
  padding: 0.5em;
  color: var(--clr-white);
  text-transform:uppercase;
  display: flex;
  flex-direction:column;
  justify-content: center;  
  gap:0.8em;
  border-radius: 5px;
  border: 2px solid var(--clr-secondary);
}
.box-shadow-property-range-inputs-wrapper {
  display:flex;
  align-items:flex-start;
  justify-content: flex-start;
}
.shadows__property-inputs__info--x {
  grid-area:x;
}

.shadows__property-inputs__info--y {
  grid-area:y;
}

.shadows__property-inputs__info--blur {
  grid-area:blur;
}

.shadows__property-inputs__info--spread {
  grid-area:spread;
}

.shadows__property-inputs__info--color {
  grid-area:color;
  flex-direction: row;
  align-items: center;
}

.shadows__property-inputs__info--inset {
  grid-area:check;
  flex-direction: row;
  align-items: center;
}

.box-shadow-inputs {
  display:flex;
  gap:0.3em;
  align-items:center;
  justify-content: center;
}

.shadows__property-inputs__value {
  -moz-appearance: textfield;
  appearance: textfield;
  padding:0.3em;
  width: 4ch;
  color: var(--clr-white);
  background-color: transparent;
  border: none;
}

.shadows__property-inputs__value::-webkit-outer-spin-button,
.shadows__property-inputs__value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
}

.shadows__property-inputs-range__value {
  -webkit-appearance: none;
  appearance:none;
  height:12px;
  width:100%;
  border-radius:5px;
  background-color:var(--clr-secondary);
  position:relative;
  overflow:hidden;
}

.shadows__property-inputs-range__value::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance:none;
  height:12px;
  width:12px;
  background-color:var(--clr-primary);
  border:2px solid var(--clr-accent);
  border-radius:50%;
  box-shadow:-405px 2px 0px 400px var(--clr-accent);
  z-index:2;
}

.shadows__property-inputs-range__value::-moz-range-thumb {
  -webkit-appearance: none;
  appearance:none;
  height:12px;
  width:12px;
  background-color:var(--clr-primary);
  border:2px solid var(--clr-accent);
  border-radius:50%;
  box-shadow:-405px 2px 0px 400px var(--clr-accent);
  z-index:2;
}

.shadows__property-inputs__unit {
  padding: 0.3em;
  color: var(--clr-white);
  text-transform: uppercase;
  border-radius: 2px;
  border: none;
  background-color: var(--clr-primary);
}

.shadows__property-inputs__color-icon {
  height: 15px;
  width: 15px;
  background-color: var(--clr-accent);
}
.shadows__property-inputs__colors-value {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  height: 15px;
  width: 15px;
  border: none;
  border-radius: 50%;
  background-color: transparent;
}

.shadows__property-inputs__colors-value::-webkit-color-swatch-wrapper {
  margin: 0;
  padding: 0;
  border-radius: 50%;
}

.shadows__property-inputs__colors-value::-webkit-color-swatch {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
}

.shadows__property-inputs__checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 15px;
  width: 15px;
  border-radius: 2px;
  background-color: var(--clr-secondary);
  position: relative;
}

.shadows__property-inputs__checkbox-label {
  font-size: var(--fs-small);
  text-transform: uppercase;
}

.shadows__property-inputs__checkbox::before {
  content: "";
  height: 100%;
  width: 100%;
  background-color: var(--clr-primary);
  background-image: url("./assets/check-icon.svg");
  background-size: 10px 7px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: inherit;
  position: absolute;
  display: none;
}

.shadows__property-inputs__checkbox:checked::before {
  display: block;
}

.main-container__code {
  padding:var(--pd-normal);
  background-color:var(--clr-code-bg);
  display:flex;
  flex-direction:column;
  overflow:scroll;
}

.code__copy-code-btn {
  max-width:max-content;
  color:var(--clr-white);
  padding:0.5em 1em;
  margin-bottom:1em;
  font-size:var(--fs-small);
  text-transform:uppercase; 
  display: flex;
  align-items: center;
  justify-content: center;
  gap:0.5em;
  border:none;
  border-radius:5px;
  background-color:var(--clr-primary); 
}

.code__text {
  color:var(--clr-white);
  line-height:1.3rem;
  font-size:var(--fs-small);
}

.code-property__list-container {
  padding-left:var(--pd-large);
}

.code-selector {
  color: #d3b382;
}

.code-property {
  color:#3FC6F1;
}

.code-unit {
  color:#E5AF5E;
}

.code-value { 
  color:#E5AF5E;
}

.code-value--color-value {
  color:#E57333;
}

@media screen and (min-width:1024px) {
  .main-container {
    height:100vh;
    width:100vw;
    min-height:100vh;
    min-width:100vw;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,1fr);
    grid-template-areas:
      "shadowList canvas canvas" 
      "shadowList canvas canvas"
      "shadowList code code"
    ;
  }

  .main-container__canvas {
    grid-area:canvas;
    border-bottom:none;
  }
  .canvas__box {
    max-height: 100%;
    max-width:100%;
    flex:1;
    overflow:scroll;
  }

  .main-container__shadow-list{
    grid-area:shadowList;
    background-color:var(--clr-secondary);
    display:flex;
    flex-direction: column;
  }
  .shadow-list__head {
    border-bottom:none;
  } 
  .shadow-list__head__dropdown-btn {
    display:none;
  }
  .shadow-list__shadows {
    max-height:100%;
    overflow-y:scroll;
    display: flex;
    flex-direction: column;
    flex:1;
    list-style-type: none;
  }

  .main-container__code {
    grid-area:code;
  }
}