[data-page="colors"] {
  display: flex;
  flex-direction: column;
  border-inline: 1px solid var(--color-border);

  /* Tokens */
  .tokens-box {
    display: grid;
    padding: calc(var(--spacing) * 12);
    gap: calc(var(--spacing) * 12);

    .token-wrapper {
      display: grid;
      gap: calc(var(--spacing) * 4);

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

        .title {
          font-size: var(--text-sm);
          font-weight: var(--font-weight-medium);
          line-height: var(--text-sm--line-height);
          text-transform: capitalize;
        }

        .format {
          display: flex;
          align-items: center;
          gap: calc(var(--spacing) * 2);

          .label {
            color: var(--color-muted-foreground);
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
          }

          .selector {
            background-color: var(--color-background);
          }
        }
      }

      .token-list {
        display: grid;
        gap: calc(var(--spacing) * 2);
        grid-template-columns: repeat(11, 1fr);

        .token-item {
          display: grid;
          position: relative;
          gap: calc(var(--spacing) * 2);

          .name {
            color: var(--color-muted-foreground);
            font-family: monospace;
            font-size: var(--text-xs);
            line-height: var(--text-xs--line-height);
            text-align: center;
          }

          .color {
            display: flex;
            width: 100%;
            height: 100px;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
          }

          .copy {
            visibility: hidden;
            position: absolute;
            width: calc(var(--spacing) * 6);
            opacity: 0;
            color: var(--color-black);
            inset-inline-end: calc(var(--spacing) * 2);
            inset-block-start: calc(var(--spacing) * 2);

            &[data-invert="true"] {
              filter: invert(1);
            }

            &:hover {
              background-color: transparent;
            }
          }

          &:hover {
            .copy {
              visibility: visible;
              opacity: 1;
            }
          }
        }
      }
    }
  }
}

/* Responsive */
@media (width <= 1024px) {
  [data-page="colors"] {
    [data-misc="head"] {
      inset-block-start: 64px;
      border-block-end: none;
    }

    .tokens-box {
      border-block-start: 1px solid var(--color-border);
      padding: calc(var(--spacing) * 6);

      .token-wrapper {
        .token-list {
          grid-template-columns: repeat(3, 1fr);

          .token-item:first-child,
          .token-item:last-child {
            grid-column: 1 / 4;
          }
        }
      }
    }
  }
}
