/*  =================================================
    Font Family
    =================================================   */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../assets/fonts/JetBrainsMono-Bold.ttf') format('truetype');
    font-weight: 700;
}

/*  =================================================
    Custom Properties (Variables)
    =================================================   */
:root {
    --white: hsl(0, 100%, 100%);
    --black: hsl(0, 0%, 0%);

    --grey-200: hsl(252, 11%, 91%);
    --grey-600: hsl(251, 9%, 53%);
    --grey-700: hsl(248, 5%, 34%);
    --grey-800: hsl(248, 10%, 15%);
    --grey-850: hsl(248, 15%, 11%);
    --grey-900: hsl(248, 17%, 9%);
    --grey-950: hsl(255, 22%, 4%);

    --green-200: hsl(127, 100%, 82%);

    --yellow-300: hsl(42, 91%, 68%);

    --orange-400: hsl(13, 95%, 66%);

    --red-500: hsl(0, 91%, 63%);

    --spacing-100: 0.8rem;
    --spacing-200: 1.6rem;
    --spacing-300: 2.4rem;
    --spacing-400: 3.2rem;
    --spacing-700: 5.6rem;
    --spacing-1000: 8.0rem;
    --spacing-1300: 10.4rem;
    --spacing-1600: 12.8rem;
    --spacing-2000: 16.0rem;
    --spacing-2200: 17.6rem;
    --spacing-2300: 18.4rem;
}

/*  =================================================
    CSS Reset
    =================================================   */

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/* 11. 10 pixels = 1rem */
html {
  font-size: 62.5%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
  appearance:textfield; /* Firefox */
}

/*  =================================================
    Utilities
    =================================================   */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

/*  =================================================
    Base Styles
    =================================================   */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: 'JetBrains Mono', sans-serif;
  background: var(--grey-950);
  background: linear-gradient(to right,#14131B, #08070B);
}

.app {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200);
  width: 91.5%;
  max-width: 54.0rem;
}

.app__heading {
  font-size: 1.6rem;
  line-height: 2.0rem;
  text-align: center;
  color: var(--grey-600);
}

.generator {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200);
}

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

.password__text {
  font-size: 2.4rem;
  line-height: 3.2rem;
  color: var(--grey-700);
}

.password-copied {
  display: flex;
  align-items: center;
  gap: var(--spacing-200);
}

.password-copied__text {
  font-size: 1.8rem;
  line-height: 2.4rem;
  color: var(--green-200);
}

.hidden {
  display: none;
}

.password__button {
  background: none;
  border: none;
  cursor: pointer;
}

.password__button:hover .password__copy {
  filter: brightness(0) invert(1);
}

.configurator {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-400);
  padding: var(--spacing-200);
  background-color: var(--grey-800);
}

.characters {
  display: flex;
  flex-direction: column;
}

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

.characters__label {
  font-size: 1.6rem;
  line-height: 2.0rem;
  color: var(--grey-200);
}

.characters__count {
  font-size: 2.4rem;
  line-height: 3.2rem;
  color: var(--green-200);
}

.characters__range {
  appearance: none;
  margin-top: 1.8rem;
  width: 100%;
  background: transparent;
}

.characters__range::-webkit-slider-thumb {
  appearance: none;
  height: 2.8rem;
  width: 2.8rem;
  margin-top: -1.0rem;
  background: var(--grey-200);
  border-radius: 12rem;
  cursor: pointer;
}

.characters__range::-webkit-slider-thumb:hover,
.characters__range::-webkit-slider-thumb:active {
  background: var(--grey-850);
  border: 0.2rem solid var(--green-200);
}

.characters__range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.8rem;
  background: linear-gradient(to right, var(--green-200) calc(var(--range-value)*1%), var(--grey-850) 0);
}

.characters-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200);
  padding: 0;
  border: none;
}

.option {
  display: flex;
  gap: var(--spacing-200);
}

.option__checkbox {
  appearance: none;
  width: 2.0rem;
  height: 2.0rem;
  background: none;
  border: 0.2rem solid var(--grey-200);
  cursor: pointer;
}

.option__checkbox:hover,
.option__checkbox:active {
  border: 0.2rem solid var(--green-200);
}

.option__checkbox:checked {
  background-color: var(--green-200);
  background-image: url('../assets/images/icon-check.svg');
  background-repeat: no-repeat;
  background-position: center;
  border: none;
}

.option__label {
  font-size: 1.6rem;
  line-height: 2.0rem;
  color: var(--grey-200);
}

.summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200);
}

.strength {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem var(--spacing-200);
  background-color: var(--grey-850);
}

.strength__title {
  font-size: 1.6rem;
  line-height: 2.0rem;
  color: var(--grey-600);
  text-transform: uppercase;
}

.level-strength {
  display: flex;
  gap: var(--spacing-200);
  align-items: center;
}

.level-strength__label {
  font-size: 2.4rem;
  line-height: 3.2rem;
  color: var(--grey-200);
}

.strength-bars {
  display: flex;
  gap: var(--spacing-100);
}

.strength-bars__bar {
  width: 1.0rem;
  height: 2.8rem;
  border: 0.2rem solid var(--grey-200);
}

.generate {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-200);
  padding: var(--spacing-200) var(--spacing-1300);
  font-size: 1.6rem;
  line-height: 2.0rem;
  text-transform: uppercase;
  color: var(--grey-800);
  background-color: var(--green-200);
  border: none;
  cursor: pointer;
}

.generate:hover,
.generate:active {
  color: var(--green-200);
  background-color: transparent;
  border: 0.2rem solid var(--green-200);
}

.generate:hover .generate__icon {
  filter: invert(94%) sepia(7%) saturate(2559%) hue-rotate(61deg) brightness(104%) contrast(108%);
}

/*  =================================================
    Tablet Styles
    =================================================   */
@media (min-width: 768px) {
  .app {
    gap: var(--spacing-400);
  }

  .app__heading {
    font-size: 2.4rem;
    line-height: 3.2rem;
  }

  .generator {
    gap: var(--spacing-300);
  }

  .password {
    padding: var(--spacing-200) var(--spacing-400);
  }

  .password__text {
    font-size: 3.2rem;
    line-height: 4.2rem;
  }

  .configurator {
    padding: var(--spacing-300) var(--spacing-400);
  }

  .characters {
    gap: var(--spacing-200);
  }

  .characters__label {
    font-size: 1.8rem;
    line-height: 2.4rem;
  }

  .characters__count {
    font-size: 3.2rem;
    line-height: 4.2rem;
  }

  .option {
    gap: var(--spacing-300);
  }

  .option__label {
    font-size: 1.8rem;
    line-height: 2.4rem;
  }

  .summary {
    gap: var(--spacing-400);
  }

  .strength {
    padding: var(--spacing-300) var(--spacing-400);
  }

  .strength__title {
    font-size: 1.8rem;
    line-height: 2.4rem;
  }

  .generate {
    gap: var(--spacing-300);
    padding: var(--spacing-300) var(--spacing-2200);
    font-size: 1.8rem;
    line-height: 2.4rem;
  }
}