@font-face {
  font-family: "Geist Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/geist:vf@latest/latin-wght-normal.woff2)
    format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/geist-mono:vf@latest/latin-wght-normal.woff2)
    format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --border-radius: 0.5rem;
  --background: oklch(0.97 0 0);
  --foreground: oklch(0.14 0 0);
  --primary: oklch(0.87 0 0);
  --primary-foreground: oklch(0.2 0 0);
  --secondary: oklch(0.72 0 0);
  --secondary-foreground: oklch(0.56 0 0);
  --input: oklch(0.97 0 0);
  --card: oklch(0.92 0 0);
  --border: oklch(0.72 0 0 / 0.3);
  --success: oklch(0.43 0.09 167);
  --success-foreground: oklch(0.85 0.13 165);
  --info: oklch(0.45 0.08 224);
  --info-foreground: oklch(0.87 0.12 207);
  --warning: oklch(0.47 0.12 46);
  --warning-foreground: oklch(0.96 0.06 96);
  --danger: oklch(0.45 0.17 14);
  --danger-foreground: oklch(0.81 0.11 12);
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-sans: "Geist Variable", ui-sans-serif, system-ui, -apple-system;
  --font-mono: "Geist Mono Variable", ui-monospace, monospace;

  & .dark {
    --background: oklch(0.14 0 0);
    --foreground: oklch(0.99 0 0);
    --primary: oklch(0.27 0 0);
    --primary-foreground: oklch(0.97 0 0);
    --secondary: oklch(0.44 0 0);
    --secondary-foreground: oklch(0.72 0 0);
    --input: oklch(0.2 0 0);
    --card: oklch(0.2 0 0);
    --border: oklch(0.37 0 0 / 0.3);
    --success: oklch(0.43 0.09 167);
    --success-foreground: oklch(0.85 0.13 165);
    --info: oklch(0.45 0.08 224);
    --info-foreground: oklch(0.87 0.12 207);
    --warning: oklch(0.47 0.12 46);
    --warning-foreground: oklch(0.96 0.06 96);
    --danger: oklch(0.45 0.17 14);
    --danger-foreground: oklch(0.81 0.11 12);
  }
}

html {
  box-sizing: border-box;
  font-size: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  font-weight: normal;
  color: inherit;
}

body {
  font-family: var(--font-sans);
  background-color: var(--background);
  color: var(--foreground);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  width: 100dvw;
  justify-content: center;
  padding: 1rem;
  overflow: hidden;

  @media (min-width: 768px) {
    padding: 2rem;
  }

  & .background-gradient {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(
        circle at 30% 70%,
        rgba(173, 216, 230, 0.35),
        transparent 60%
      ),
      radial-gradient(
        circle at 70% 30%,
        rgba(255, 182, 193, 0.4),
        transparent 60%
      );
  }

  &.dark .background-gradient {
    background: radial-gradient(
        ellipse 80% 60% at 50% 0%,
        rgba(102, 98, 95, 0.25),
        transparent 70%
      ),
      transparent;
  }

  & input[type="range"] {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    height: 1rem;
    background-color: var(--primary);
    border-radius: var(--border-radius);

    &::-webkit-slider-runnable-track {
      height: 1rem;
      background: transparent;
    }

    &::-moz-range-track {
      height: 1rem;
      background: transparent;
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 1.4rem;
      aspect-ratio: 1;
      margin-top: -0.2rem;
      background: var(--info);
      border-radius: 50%;
      border: 2px solid var(--border);
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    &::-webkit-slider-thumb:hover {
      transform: scale(1.1);
    }

    &::-moz-range-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 1.4rem;
      aspect-ratio: 1;
      margin-top: -0.2rem;
      background: var(--info);
      border-radius: 50%;
      border: 2px solid var(--border);
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    &::-moz-range-thumb:hover {
      transform: scale(1.1);
    }
  }

  & > header {
    text-align: center;
    margin-bottom: 1rem;

    & > h1 {
      font-weight: bold;
    }

    & > p {
      color: var(--secondary-foreground);
    }
  }

  & > main {
    width: 100%;
    max-width: 75ch;
    margin: 0 auto;
    border-radius: var(--border-radius);
    color: var(--foreground);

    @media (max-width: 480px) {
      max-width: 100%;
    }

    & .generation-container {
      display: flex;
      gap: 0.5rem;
      align-items: center;

      & .input-container {
        display: flex;
        gap: 0.5rem;
        align-items: stretch;
        justify-content: space-between;
        background-color: var(--input);
        border-radius: var(--border-radius);
        border: 1px solid var(--border);
        overflow: hidden;
        box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.1);
        min-height: 2.5rem;
        flex: 1;

        & #generated-password {
          font-family: var(--font-mono);
        }

        & > input {
          background-color: transparent;
          border: none;
          flex: 1;
          display: inline-block;
          position: relative;
          padding: 0 1rem;
          border-radius: inherit;
          font-family: inherit;
          font-size: inherit;

          &:focus {
            outline: none;
          }
        }

        & > .actions {
          display: flex;
          gap: 0.25rem;
          align-items: center;
          padding: 0.3rem;

          & > button {
            display: flex;
            align-items: center;
            justify-content: center;
            aspect-ratio: 1;
            background-color: transparent;
            border-radius: var(--border-radius);
            color: var(--primary-foreground);
            border: none;
            padding: 0.4rem;
            transition: background-color 0.2s ease-in-out;
            cursor: pointer;

            &:hover {
              background-color: var(--primary);
            }
          }
        }
      }

      & #settings-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        background-color: var(--input);
        border-radius: var(--border-radius);
        border: 1px solid var(--border);
        min-height: 2.5rem;
        aspect-ratio: 1;
        box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: transform 0.2s ease-in-out;

        &:active {
          transform: scale(0.95);
        }
      }
    }

    & .password-info {
      margin-top: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;

      @media (max-width: 480px) {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
      }

      & .strength-meter {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;

        & .strength-label {
          font-size: 0.8rem;
          color: var(--secondary-foreground);
        }

        & .strength-bar {
          border-radius: calc(0.8rem - var(--border-radius));
          position: relative;
          overflow: hidden;
          background-color: var(--input);
          border: 1px solid var(--border);

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: -50%;
            width: 50%;
            height: 100%;
            background: linear-gradient(
              120deg,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, 0.4) 50%,
              rgba(255, 255, 255, 0) 100%
            );
            animation: shine 2s infinite;
          }

          & .strength-fill {
            height: 0.8rem;
            transition: width 0.3s ease, background-color 0.3s ease;

            &.weak {
              background-color: var(--danger-foreground);
            }

            &.average {
              background-color: var(--warning-foreground);
            }

            &.strong {
              background-color: var(--success-foreground);
            }
          }
        }
      }

      & .character-count {
        font-size: 0.8rem;
        color: var(--secondary-foreground);
        white-space: nowrap;

        @media (max-width: 480px) {
          text-align: center;
        }
      }
    }

    & .bottom-sheet-container {
      position: absolute;
      top: 100dvh;
      left: 0;
      right: 0;
      bottom: 0dvh;
      height: 100dvh;
      display: flex;
      align-items: end;
      background-color: rgba(0, 0, 0, 0.7);

      &.open {
        top: 0;
      }

      & .bottom-sheet {
        background-color: var(--card);
        border-radius: var(--border-radius) var(--border-radius) 0 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: fit-content;
        max-height: 90dvh;

        & #close-bottom-sheet {
          display: flex;
          justify-content: center;
          align-items: center;
          align-self: end;
          aspect-ratio: 1;
          padding: 0.8rem;
          background-color: var(--danger);
          color: var(--danger-foreground);
          border-radius: var(--border-radius);
          border: 1px solid var(--border);
          margin: 1rem 1rem 1.5rem 1rem;
        }

        & .bottom-sheet-body {
          overflow-y: auto;
          padding: 1rem;

          & h2 {
            font-weight: bold;
            margin-bottom: 1.5rem;
          }

          & section {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;

            &:not(:last-child) {
              margin-bottom: 1.5rem;
            }

            & h3 {
              font-weight: 600;
              color: var(--secondary-foreground);
            }

            & .character-help {
              font-size: 0.8rem;
              color: var(--secondary-foreground);
              margin-bottom: 0.5rem;
              font-style: italic;
            }

            & .slider-container {
              display: flex;
              align-items: center;
              gap: 1rem;
              height: 2rem;

              & .slider-label {
                font-family: var(--font-mono);
                font-variant-numeric: tabular-nums;
                width: 3.5ch;
              }
            }

            &#characters-section ul,
            &#password-type-section ul,
            &#ui-section ul {
              display: grid;
              gap: 0.5rem;
              list-style-type: none;

              & li label {
                display: flex;
                align-items: center;
                gap: 0.5rem;
              }
            }

            &#password-type-section ul {
              flex-direction: column;
            }

            &#characters-section ul {
              grid-template-columns: 1fr 1fr;

              @media (max-width: 480px) {
                grid-template-columns: 1fr;
              }
            }

            &#ui-section ul {
              grid-template-columns: 1fr 1fr 1fr;

              @media (max-width: 480px) {
                & li label {
                  justify-content: center;

                  & .label-text {
                    display: none;
                  }
                }
              }
            }

            &#characters-section ul li,
            &#password-type-section ul li,
            &#ui-section ul li {
              position: relative;
              border: 1px solid var(--border);
              border-radius: var(--border-radius);
              min-height: 2.5rem;
              background-color: var(--input);
              color: var(--foreground);
              overflow: hidden;
              transition: transform 0.2s ease-in-out,
                box-shadow 0.2s ease-in-out;

              &:hover {
                transform: translate3d(0.05rem, -0.05rem, 0);
                box-shadow: -0.15rem 0.15rem 0.1rem 0.05rem rgba(0, 0, 0, 0.1);
              }

              & label {
                display: flex;
                padding: 0.8rem 1rem;
                align-items: center;
                border-radius: inherit;
                cursor: pointer;
                height: 100%;
                width: 100%;
              }

              &:has(input[type="checkbox"]:checked),
              &:has(input[type="radio"]:checked) {
                background-color: var(--info);
                color: var(--info-foreground);
              }

              &:has(input[type="checkbox"]:disabled),
              &:has(input[type="radio"]:disabled) {
                opacity: 0.6;
                background-color: var(--secondary);
                color: var(--primary-foreground);
                box-shadow: none;
              }

              &:has(input[type="checkbox"]:disabled):hover,
              &:has(input[type="radio"]:disabled):hover {
                transform: none;
              }

              & input[type="checkbox"],
              & input[type="radio"] {
                display: none;
              }
            }

            &#characters-section ul li,
            &#password-type-section ul li {
              &:last-child:nth-child(odd) {
                grid-column: 1 / -1;
              }
            }
          }
        }
      }
    }
  }
}

@keyframes shine {
  0% {
    left: -50%;
  }

  100% {
    left: 100%;
  }
}

/* Screen reader only class for accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}