@layer pages {
  .colors {
    & .picker {
      display: grid;
      grid-template-columns: 2.5rem minmax(0, 1fr);
      gap: var(--space-8);
    }

    & input[type='color'] {
      inline-size: 100%;
      block-size: 100%;
      padding: 2px;
      border: 1px solid var(--color-line);
      border-radius: var(--radius-control);
      background-color: var(--color-paper);
      cursor: pointer;

      &:hover {
        border-color: var(--color-muted);
      }
    }

    & .number {
      margin: 0;
    }

    & .scale {
      margin-block: var(--space-12) var(--space-16);
    }

    & .track {
      position: relative;
      block-size: var(--space-12);
      border-radius: var(--radius-control);
      background: linear-gradient(
        to right,
        color-mix(in oklch, var(--color-danger) 30%, var(--color-paper)) 0 36.09%,
        var(--color-notice) 36.09% 49.4%,
        var(--color-green-light) 49.4% 63.92%,
        var(--color-green) 63.92%
      );
      box-shadow: var(--shadow-well);
    }

    & .marker {
      position: absolute;
      inset-block: calc(-1 * var(--space-4));
      inset-inline-start: var(--at);
      inline-size: 4px;
      border-radius: var(--radius-inline);
      background: var(--color-charcoal);
      box-shadow: 0 0 0 2px var(--color-paper);
      translate: -50% 0;
    }

    & .ticks {
      position: relative;
      block-size: var(--leading-small);
      margin: var(--space-4) 0 0;
      padding: 0;
      color: var(--color-muted);
      font-size: var(--text-small);
      line-height: var(--leading-small);
      list-style: none;

      & li {
        position: absolute;
        inset-inline-start: var(--at);
        white-space: nowrap;
        translate: -50% 0;
      }

      & [data-ratio='1'] {
        --at: 0%;
        translate: none;
      }

      & [data-ratio='3'] {
        --at: 36.09%;
      }

      & [data-ratio='4.5'] {
        --at: 49.4%;
      }

      & [data-ratio='7'] {
        --at: 63.92%;
      }

      & [data-ratio='21'] {
        --at: 100%;
        translate: -100% 0;
      }
    }

    & .checks {
      margin: 0 0 var(--space-16);
      padding: 0;
      font-size: var(--text-small);
      line-height: var(--leading-small);
      list-style: none;

      & li {
        color: var(--color-muted);

        &::before {
          content: '·';
          display: inline-block;
          inline-size: 1.25em;
        }

        &[data-pass='true'] {
          color: var(--color-charcoal);

          &::before {
            content: '✓' / 'подходит: ';
            color: var(--color-green-deep);
          }
        }

        &[data-pass='false']::before {
          content: '✕' / 'не подходит: ';
          color: var(--color-danger);
        }
      }
    }

    & .sample {
      padding: var(--space-20) var(--space-24);
      border: 1px solid var(--color-line);
      border-radius: var(--radius-control);

      & p {
        margin: 0;
      }

      & .large {
        margin-block-end: var(--space-8);
        font-size: 24px;
        line-height: 1.25;
      }
    }

    & .baseline {
      background-color: #fff;
      color: #000;
    }

    & .code {
      margin-block-start: var(--space-24);
    }

    & .forced {
      display: none;

      @media (forced-colors: active) {
        display: block;
      }
    }
  }
}