/* fonts */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  src: local("JetBrains Mono"),
    url("assets/fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  src: local("JetBrains Mono"),
    url("assets/fonts/JetBrainsMono-Italic-VariableFont_wght.ttf")
      format("truetype");
}

/* reset */

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

img {
  max-inline-size: 100%;
  display: block;
}

/*slider reset
https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
*/
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

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

input[type="range"]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

/* globals */

:root {
  --grey-950: #08070b;
  --grey-900: #14131b;
  --grey-850: #18171f;
  --grey-800: #24232c;
  --grey-700: #54535b;
  --grey-600: #817d92;
  --grey-200: #e6e5ea;
  --green-200: #a4ffaf;
  --yellow-300: #f8cd65;
  --orange-400: #fb7c58;
  --red-100: #f64a4a;
  --red-500: #f64a4a;
  --orange-100: #fb7c58;
  --orange-300: #f8cd65;
  --gradient: linear-gradient(#14131b, #08070b);
  --spacing-100: 0.5rem; /* 8px */
  --spacing-200: 1rem; /* 16px */
  --spacing-300: 1.5rem; /* 24px */
  --spacing-400: 2rem; /* 32px */
  --spacing-700: 3.5rem; /* 56px */
  --spacing-1000: 5rem; /* 80px */
  --spacing-1300: 6.5rem; /* 104px */
  --spacing-1600: 8rem; /* 128px */
  --spacing-2000: 10rem; /* 160px */
  --spacing-2200: 11rem; /* 176px */
  --spacing-2300: 11.5rem; /* 184px */
  --font-step-1: 1rem; /* 16px */
  --font-step-2: 1.125rem; /* 18px */
  --font-step-3: 1.5rem; /* 24px */
  --font-step-4: 2rem; /* 32px */
  --font-base: "JetBrains Mono", sans-serif;
  --font-weight-regular: 700;
  --thumb-radius: 1.75rem;
  --fluid-16-32: clamp(1rem, 0.0458rem + 4.0712vw, 2rem);
  --fluid-16-24: clamp(1rem, 0.5229rem + 2.0356vw, 1.5rem);
  --fluid-16-41: clamp(1rem, -0.4909rem + 6.3613vw, 2.5625rem);
  --fluid-343-540: clamp(21.4375rem, 9.6889rem + 50.1272vw, 33.75rem);
  --fluid-24-32: clamp(1.5rem, 1.0229rem + 2.0356vw, 2rem);
  --fluid-64-80: clamp(4rem, 3.0458rem + 4.0712vw, 5rem);
  --fluid-14-24: clamp(0.875rem, 0.2786rem + 2.5445vw, 1.5rem);
  --fluid-8-16: clamp(0.5rem, 0.0229rem + 2.0356vw, 1rem);
  --fluid-16-18: clamp(1rem, 0.8807rem + 0.5089vw, 1.125rem);
  --fluid-18-24: clamp(1.125rem, 0.7672rem + 1.5267vw, 1.5rem);
  --fluid-175-21: clamp(1.0938rem, 0.885rem + 0.8906vw, 1.3125rem);
}

body {
  block-size: 100dvh;
  background-color: var(--grey-950);
  color: var(--grey-200);
  font-family: var(--font-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--fluid-16-18);
  line-height: 1.3;
}

main {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  color: var(--grey-600);
  font-size: var(--fluid-16-24);
  text-align: center;
}

fieldset {
  border: none;
}

.generator {
  inline-size: var(--fluid-343-540);
}

.generator > * + * {
  margin-block-start: var(--fluid-16-24);
}

.password-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--grey-800);
  padding: var(--spacing-200);
  padding-inline: var(--fluid-16-32);
}

.password-display > p {
  font-size: var(--fluid-24-32);
  word-break: break-all;
}

.muted {
  color: var(--grey-700);
  user-select: none;
}

.copy-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-100);
  text-transform: uppercase;
  color: #a4ffaf;
  & p {
    display: none;
  }
  & img {
    width: var(--fluid-175-21);
    min-width: 1.09375;
    &:hover {
      filter: brightness(0) saturate(100%) invert(1);
    }
  }
  & button {
    background-color: transparent;
    border: none;
  }
}

.copy-status.active {
  & p {
    display: inline;
  }
}

.generator form {
  background-color: var(--grey-800);
  padding: var(--fluid-16-24);
  padding-inline: var(--fluid-16-32);
  padding-block-end: var(--fluid-16-41);
}

.generator form > * + * {
  margin-block-start: var(--fluid-16-32);
}

input[type="range"]::-ms-thumb {
  height: var(--thumb-radius);
  width: var(--thumb-radius);
  border-radius: 50%;
  background: var(--grey-200);
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: var(--thumb-radius);
  width: var(--thumb-radius);
  border-radius: 50%;
  background: var(--grey-200);
  cursor: pointer;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

input[type="range"]::-moz-range-thumb {
  height: var(--thumb-radius);
  width: var(--thumb-radius);
  border-radius: 50%;
  background: var(--grey-200);
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--grey-850);
  border: 0.125rem solid var(--green-200);
}
input[type="range"]:active::-webkit-slider-thumb {
  background: var(--grey-850);
  border: 0.125rem solid var(--green-200);
}
input[type="range"]:focus::-webkit-slider-thumb {
  background: var(--grey-850);
  border: 0.125rem solid var(--green-200);
}
input[type="range"]::-moz-range-thumb:hover {
  background: var(--grey-850);
  border: 0.125rem solid var(--green-200);
}
input[type="range"]:active::-moz-range-thumb {
  background: var(--grey-850);
  border: 0.125rem solid var(--green-200);
}
input[type="range"]:focus::-moz-range-thumb {
  background: var(--grey-850);
  border: 0.125rem solid var(--green-200);
}
input[type="range"]::-ms-thumb:hover {
  background: var(--grey-850);
  border: 0.125rem solid var(--green-200);
}
input[type="range"]:active::-ms-thumb {
  background: var(--grey-850);
  border: 0.125rem solid var(--green-200);
}
input[type="range"]:focus::-ms-thumb {
  background: var(--grey-850);
  border: 0.125rem solid var(--green-200);
}

input[type="range"] {
  width: 100%;
  background: linear-gradient(
    to right,
    var(--green-200) 0%,
    var(--green-200) 50%,
    var(--grey-850) 50%,
    var(--grey-850) 100%
  );
  height: var(--spacing-100);
  cursor: pointer;
  margin-block-start: calc(0.625rem + var(--fluid-8-16));
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: var(--spacing-100);
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: var(--spacing-100);
  cursor: pointer;
}

input[type="range"]::-ms-track {
  width: 100%;
  height: var(--spacing-100);
  cursor: pointer;
  background: transparent;
  color: transparent;
  border-color: transparent;
}

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

.char-length-display span {
  color: var(--green-200);
  font-size: var(--fluid-24-32);
}

.generator form fieldset > * + * {
  margin-block-start: 0.875rem;
}
.condition-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-300);
}

.condition-checkbox input {
  /*https://moderncss.dev/pure-css-custom-checkbox-style/*/
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  margin: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: solid 0.125rem var(--grey-200);
  cursor: pointer;
}

.condition-checkbox input:checked {
  background-color: var(--green-200);
  border: none;
  background-image: url("assets/images/icon-check.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.generator form button {
  border: none;
  display: flex;
  inline-size: 100%;
  padding: var(--fluid-16-24);
  font-family: inherit;
  align-items: center;
  justify-content: center;
  gap: var(--fluid-16-24);
  text-transform: uppercase;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  background-color: var(--green-200);
  margin-block-start: var(--fluid-16-32);
  outline: none;
  color: var(--grey-800);
  cursor: pointer;
  &:is(:hover, :focus-visible):not(:disabled) {
    outline: solid 0.125rem var(--green-200);
    color: var(--green-200);
    background-color: transparent;
    & img {
      /*https://codepen.io/sosuke/pen/Pjoqqp <-- WOW!*/
      filter: brightness(0) saturate(100%) invert(85%) sepia(34%) saturate(427%)
        hue-rotate(68deg) brightness(102%) contrast(102%);
    }
  }
  &:disabled {
    opacity: 50%;
  }
}

.strength-container {
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--grey-850);
  padding-inline: var(--fluid-16-32);
  padding-block: var(--fluid-14-24);
}

.strength-container > p {
  color: var(--grey-600);
}

.strength-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-200);
  font-size: var(--fluid-18-24);
}

[data-strength] {
  display: flex;
  gap: var(--spacing-100);
}

[data-strength] * {
  width: 0.625rem;
  height: 1.75rem;
  background-color: var(--bar-color, transparent);
  border: solid 0.125rem var(--bar-color, var(--grey-200));
}

[data-strength="1"] {
  & :nth-child(1) {
    --bar-color: var(--red-100);
  }
}

[data-strength="2"] {
  & :nth-child(-n + 2) {
    --bar-color: var(--orange-100);
  }
}

[data-strength="3"] {
  & :nth-child(-n + 3) {
    --bar-color: var(--orange-300);
  }
}

[data-strength="4"] * {
  --bar-color: var(--green-200);
}