@layer variables, reset, layout, utilities;

@layer variables {
  :root {
    --clr-neutral-900: #12131a;
    --clr-neutral-800: #21222c;
    --clr-neutral-700: #2a2b37;
    --clr-neutral-600: #404254;
    --clr-neutral-200: #e4e4ef;
    --clr-neutral-100: #f2f2f7;
    --clr-neutral: #fff;

    --clr-purple-400: #d3a0fa;
    --clr-purple-500: #c27cf8;

    --clr-yellow-500: #ff9f00;

    --clr-orange-500: #fe8159;
    --clr-orange-800: #da3701;

    --spacing-2: 0.2rem;
    --spacing-4: 0.4rem;
    --spacing-6: 0.6rem;
    --spacing-8: 0.8rem;
    --spacing-12: 1.2rem;
    --spacing-16: 1.6rem;
    --spacing-20: 2rem;
    --spacing-24: 2.4rem;
    --spacing-32: 3.2rem;
    --spacing-40: 4rem;
    --spacing-48: 4.8rem;
    --spacing-64: 6.4rem;
    --spacing-80: 8rem;

    --radius-4: 0.4rem;
    --radius-6: 0.6rem;
    --radius-8: 0.8rem;
    --radius-10: 1rem;
    --radius-12: 1.2rem;
    --radius-16: 1.6rem;
    --radius-20: 2rem;
    --radius-24: 2.4rem;
    --radius-full: 99rem;
  }

  :root[data-theme="light"] {
    --body-bg: var(--clr-neutral);
    --bg-theme: url(./images/bg-light-theme.png);
    --logo: url(./images/logo-light-theme.svg);
    --switch-btn: url(./images/icon-moon.svg);
    --switch-btn-bg: var(--clr-neutral-100);
    --heading: var(--clr-neutral-900);
    --main-text-bg: var(--clr-neutral-100);
    --main-text-bg-hover: var(--clr-neutral-200);
    --main-text-bg-focus: var(--clr-neutral-200);

    --main-text-border: var(--clr-neutral-200);
    --main-text-border-hover: var(--clr-neutral-200);
    --main-text-error: var(--clr-orange-800);
    --main-text-color: var(--clr-neutral-700);

    --main-filters-text: var(--clr-neutral-900);
    --checkbox-border: var(--clr-neutral-900);
    --char-limit-color: var(--clr-neutral-900);
    --result-title: var(--clr-neutral-900);

    --result-no-text: var(--clr-neutral-600);
    --result-see-more: var(--clr-neutral-900);

    --chevron-icon: var(--clr-neutral-900);
    --progress-text: var(--clr-neutral-900);

    --progress-bg: var(--clr-neutral-100);
  }

  :root[data-theme="dark"] {
    --body-bg: var(--clr-neutral-900);
    --bg-theme: url(./images/bg-dark-theme.png);
    --logo: url(./images/logo-dark-theme.svg);
    --switch-btn: url(./images/icon-sun.svg);
    --switch-btn-bg: var(--clr-neutral-700);
    --heading: var(--clr-neutral-100);
    --main-text-bg: var(--clr-neutral-800);
    --main-text-bg-hover: var(--clr-neutral-700);
    --main-text-bg-focus: var(--clr-neutral-700);
    --main-text-error: var(--clr-orange-500);

    --main-text-border: var(--clr-neutral-700);
    --main-text-border-hover: var(--clr-neutral-600);
    --main-text-color: var(--clr-neutral-200);

    --main-filters-text: var(--clr-neutral-200);
    --checkbox-border: var(--clr-neutral-200);
    --char-limit-color: var(--clr-neutral);
    --result-title: var(--clr-neutral-200);

    --result-no-text: var(--clr-neutral-200);
    --result-see-more: var(--clr-neutral-200);

    --chevron-icon: var(--clr-neutral-200);
    --progress-text: var(--clr-neutral-200);

    --progress-bg: var(--clr-neutral-800);
  }
}

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

  html {
    font-size: 62.5%;
    text-size-adjust: none;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

  body {
    font-family: "DM Sans", sans-serif;
    line-height: 1;
    background:
      var(--bg-theme) no-repeat center/cover,
      var(--body-bg);

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      text-wrap: balance;
    }

    p {
      max-width: 75ch;
      text-wrap: pretty;
    }

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

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

    [role="list"] {
      list-style: none;
    }
  }
}

@layer utilities {
  .container {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--spacing-40);
    max-width: 99rem;
    margin: var(--spacing-16) var(--spacing-16) var(--spacing-32);

    @media (min-width: 48em) {
      margin-inline: var(--spacing-32);
    }

    @media (min-width: 65em) {
      margin-block-start: var(--spacing-32);
      margin-block-end: var(--spacing-64);
      margin-inline: auto;
      gap: var(--spacing-48);
    }
  }

  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  [hidden] {
    display: none;
  }

  .error {
    box-shadow: inset 0 0 0 1px var(--main-text-error);
    filter: drop-shadow(0 0 8px var(--main-text-error));
    transform: translateZ(0);
  }
}

@layer layout {
  .navigation {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
  }

  .navigation__logo {
    width: 20rem;
    height: 3rem;
    background: var(--logo) no-repeat center/contain;

    @media (min-width: 48em) {
      width: 24.5rem;
      height: 4rem;
    }
  }

  .navigation__btn {
    border: none;
    padding: var(--spacing-6);
    border-radius: var(--radius-6);
    background-color: var(--switch-btn-bg);

    @media (min-width: 48em) {
      padding: 1.1rem;
    }

    &:hover {
      cursor: pointer;
    }
  }
  .navigation__switch {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background: var(--switch-btn) no-repeat center/contain;

    @media (min-width: 48em) {
      width: 2.2rem;
      height: 2.2rem;
    }
  }

  .heading {
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: -0.1rem;
    text-align: center;
    text-wrap: auto;
    color: var(--heading);

    @media (min-width: 48em) {
      font-size: 6.4rem;
      max-width: 51rem;
      margin-inline: auto;
    }
  }

  .main {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--spacing-16);
  }

  .main__text {
    width: 100%;
    height: 20rem;
    background-color: var(--main-text-bg);
    border: none;
    box-shadow: inset 0 0 0 2px var(--main-text-border);
    border-radius: var(--radius-12);
    padding: var(--spacing-12);
    resize: none;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.06rem;
    color: var(--main-text-color);
    outline: none;

    &::placeholder {
      font-size: inherit;
      font-weight: inherit;
      color: inherit;
    }

    &:hover {
      background-color: var(--main-text-bg-hover);
      cursor: pointer;
      box-shadow: inset 0 0 0 2px var(--main-text-border-hover);
    }

    &:focus {
      box-shadow: inset 0 0 0 2px var(--clr-purple-500);
      filter: drop-shadow(0 0 8px var(--clr-purple-400));
      transform: translateZ(0); /* Fixes Safari issue */
      background-color: var(--main-text-bg-focus);
    }

    @media (min-width: 48em) {
      font-size: 2rem;
      padding: var(--spacing-20);
    }
  }

  .error__box {
    display: flex;
    flex-flow: row nowrap;
    gap: var(--spacing-8);
    align-items: center;
    margin-block-start: -0.4rem;
  }

  .error__text {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.06rem;
    color: var(--main-text-error);
  }

  .error__icon {
    fill: var(--main-text-error);
  }

  .main__filters {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--spacing-12);

    @media (min-width: 26.5em) {
      display: flex;
      flex-flow: row wrap;
      gap: var(--spacing-24);
      align-items: center;
    }

    @media (min-width: 48em) {
      p {
        margin-inline-start: auto;
      }
    }

    div {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      gap: 1rem;
      height: 2.1rem;
    }

    label,
    p {
      font-size: 1.6rem;
      line-height: 1.3;
      font-weight: 400;
      color: var(--main-filters-text);
      letter-spacing: -0.06rem;
    }

    div input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
      position: relative;
      width: 1.6rem;
      height: 1.6rem;
      border: none;
      box-shadow: inset 0 0 0 1px var(--checkbox-border);
      border-radius: var(--radius-4);

      &:checked::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 6px;
        width: 4px;
        height: 10px;
        border: solid var(--clr-neutral-900);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }

      &:focus,
      &:hover {
        outline: 1px solid var(--clr-purple-400);
        outline-offset: 1px;
        box-shadow: inset 0 0 0 1px var(--clr-neutral-200);
      }

      &:checked {
        background-color: var(--clr-purple-400);
        box-shadow: none;
      }
    }

    div input[type="text"] {
      border: none;
      box-shadow: inset 0 0 0 1px var(--clr-neutral-600);
      border-radius: var(--radius-6);
      width: 5.5rem;
      height: auto;
      padding-block: var(--spacing-4);
      padding-inline: var(--spacing-12);
      outline: none;
      font-size: 1.4rem;
      font-weight: 400;
      letter-spacing: -0.06rem;
      background-color: transparent;
      color: var(--char-limit-color);
    }
  }

  .result {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--spacing-24);
  }

  .result__counts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22.4rem, 100%), 1fr));
    gap: var(--spacing-16);

    article {
      display: flex;
      flex-flow: column nowrap;
      gap: var(--spacing-8);
      padding: var(--spacing-20);
      border-radius: var(--radius-12);
      position: relative;
      height: 13rem;
      overflow: hidden;

      @media (min-width: 48em) {
        height: 15rem;
        padding-block: var(--spacing-16);
        padding-inline: var(--spacing-12);
      }

      &::after {
        content: "";
        position: absolute;
        top: -1rem;
        right: -5rem;
        width: 15rem;
        height: 15rem;

        @media (min-width: 48em) {
          top: 0;
        }
      }

      &:nth-of-type(1) {
        background-color: var(--clr-purple-400);
        &::after {
          background: url(./images/pattern-character-count.svg) no-repeat
            center/contain;
        }
      }

      &:nth-of-type(2) {
        background-color: var(--clr-yellow-500);
        &::after {
          background: url(./images/pattern-word-count.svg) no-repeat
            center/contain;
          right: -3rem;
        }
      }

      &:nth-of-type(3) {
        background-color: var(--clr-orange-500);
        &::after {
          background: url(./images/pattern-sentence-count.svg) no-repeat
            center/contain;
          right: -3rem;
        }
      }
    }
  }

  /* Selects every child but first one */
  .result__text * + * {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.06rem;
    color: var(--clr-neutral-900);
  }

  .result__text * {
    z-index: 2;
  }

  .result__count {
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: -0.1rem;
    color: var(--clr-neutral-900);

    @media (min-width: 48em) {
      font-size: 6.4rem;
    }
  }

  .result__progress-bars {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--spacing-20);

    h2 {
      font-size: 2.4rem;
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: -0.1rem;
      color: var(--result-title);
    }

    .no-characters {
      font-size: 1.6rem;
      font-weight: 400;
      color: var(--result-no-text);
      line-height: 1.3;
      letter-spacing: -0.06rem;
    }

    .see-more {
      font-size: 2rem;
      font-weight: 400;
      line-height: 1.4;
      letter-spacing: -0.06rem;
      color: var(--result-see-more);
      margin-inline-end: var(--spacing-8);

      &:hover {
        cursor: pointer;
      }
    }

    .chevron {
      margin-inline-start: var(--spacing-8);
      width: 2rem;
      height: 2rem;
      display: inline-block;
      vertical-align: middle;
      fill: var(--chevron-icon);
    }
  }

  .progress {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.2rem 1.4rem;

    & p {
      font-size: 1.6rem;
      font-weight: 400;
      line-height: 1.3;
      color: var(--progress-text);
      letter-spacing: -0.06rem;
    }
  }

  progress[value] {
    width: 100%;
    height: 1.2rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background-color: var(--progress-bg); /* Firefox fallback */
    border-radius: var(--radius-full);
    overflow: hidden; /* for rounded ends in Firefox */
  }

  /* Chrome, Safari, Edge */
  progress[value]::-webkit-progress-bar {
    background-color: var(--progress-bg);
    border-radius: var(--radius-full);
  }

  progress[value]::-webkit-progress-value {
    background-color: var(--clr-purple-400);
    border-radius: var(--radius-full);
  }
  /* Firefox */
  progress[value]::-moz-progress-bar {
    background-color: var(--clr-purple-400);
    border-radius: var(--radius-full);
  }
}