/* Only for Style Guide | MIT License */
/* stylelint-disable no-unknown-custom-properties */

@layer test {
  button {
    background-color: var(--color-fg);
    border: 1px solid;
    border-radius: var(--space-v-tiny);
    color: var(--color-bg);
    font-family: inherit;
    font-size: var(--text-small);
    padding: var(--space-v-small) var(--space-h-default);
  }

  /* Layout */
  .js-test-layout::before {
    --background-size-x-body: min(
      100%,
      var(--padding-inline-body) + var(--max-inline-size-body) +
        var(--padding-inline-body)
    );
    --color-test-gutter: hsl(300 100% 50%);
    --color-test-column: hsl(120 100% 50%);

    background-image: linear-gradient(
      to right,
      var(--color-test-gutter) 0,
      var(--color-test-gutter) var(--padding-inline-body),
      var(--color-test-column) var(--padding-inline-body),
      var(--color-test-column)
        calc(var(--background-size-x-body) - var(--padding-inline-body)),
      var(--color-test-gutter)
        calc(var(--background-size-x-body) - var(--padding-inline-body)),
      var(--color-test-gutter) var(--background-size-x-body)
    );
    background-position-x: left;
    background-repeat: repeat-y;
    background-size: var(--background-size-x-body) 1px;
    content: "";
    inset: 0 0 0 var(--margin-inline-start-body);
    opacity: 0.2;
    pointer-events: none;
    position: fixed;
    z-index: 1;
  }

  .js-test-layout * {
    outline: 1px solid hsl(30 100% 50%);
  }

  /* Text */
  .test-text > tbody > tr:nth-child(1) > td:nth-child(2) .test {
    font-size: var(--text-small);
  }

  .test-text > tbody > tr:nth-child(2) > td:nth-child(2) .test {
    font-size: var(--text-default);
  }

  .test-text > tbody > tr:nth-child(3) > td:nth-child(2) .test {
    font-size: var(--text-large);
  }

  .test-text > tbody > tr:nth-child(4) > td:nth-child(2) .test {
    font-size: var(--text-huge);
  }

  /* Leading */
  .test-leading > tbody > tr:nth-child(1) > td:nth-child(2) .test {
    line-height: var(--leading-small);
  }

  .test-leading > tbody > tr:nth-child(2) > td:nth-child(2) .test {
    line-height: var(--leading-default);
  }

  /* Space */
  .test-space > tbody > tr:nth-child(1) > td:nth-child(2) .test:last-child {
    margin-block-start: var(--space-v-tiny);
  }

  .test-space > tbody > tr:nth-child(2) > td:nth-child(2) .test:last-child {
    margin-block-start: var(--space-v-small);
  }

  .test-space > tbody > tr:nth-child(3) > td:nth-child(2) .test:last-child {
    margin-block-start: var(--space-v-default);
  }

  .test-space > tbody > tr:nth-child(4) > td:nth-child(2) .test:last-child {
    margin-block-start: var(--space-v-large);
  }

  .test-space > tbody > tr:nth-child(5) > td:nth-child(2) .test:last-child {
    margin-block-start: var(--space-v-huge);
  }

  .test-space > tbody > tr:nth-child(6) > td:nth-child(2) .test:last-child {
    margin-inline-start: var(--space-h-default);
  }

  .test-space > tbody > tr:nth-child(7) > td:nth-child(2) .test:last-child {
    margin-inline-start: var(--space-h-large);
  }

  .test-space > tbody > tr:nth-child(8) > td:nth-child(2) .test:last-child {
    margin-block-start: var(--space-v-rect);
  }

  /* Color */
  .test-color > tbody > tr:nth-child(1) > td:nth-child(2) .test {
    background-color: var(--color-bg);
    color: var(--color-fg);
  }

  .test-color > tbody > tr:nth-child(2) > td:nth-child(2) .test {
    background-color: var(--color-bg-rect);
    color: var(--color-fg);
  }

  .test-color > tbody > tr:nth-child(3) > td:nth-child(2) .test {
    background-color: var(--color-fg);
    color: var(--color-bg);
  }

  .test-color > tbody > tr:nth-child(4) > td:nth-child(2) .test {
    background-color: var(--color-link);
    color: var(--color-bg-rect);
  }

  .test-color > tbody > tr:nth-child(5) > td:nth-child(2) .test {
    background-color: var(--color-link);
    color: var(--color-fg);
  }

  .test-color > tbody > tr:nth-child(6) > td:nth-child(2) .test {
    background-color: var(--color-lighten);
    color: var(--color-fg);
  }

  .js-test-monochrome {
    filter: grayscale(100%);
  }
}