@layer components {
  .tool-icon {
    --sky-top: var(--color-focus);
    --sky-bottom: var(--color-cyan-light);
    flex: none;
    inline-size: 48px;
    block-size: 48px;
    border-radius: 50%;
    corner-shape: round;
    background: linear-gradient(var(--sky-top), var(--sky-bottom) 55%);
    box-shadow: var(--shadow-flat);
    fill: none;
    stroke: var(--color-charcoal);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;

    & .paper {
      fill: var(--color-paper);
    }

    & .green {
      fill: var(--color-green);
      stroke: none;
    }

    & .dots {
      stroke-width: 2.5;
    }

    & .handle {
      stroke-width: 3;
    }
  }

  .tool-heading {
    margin-block-end: var(--space-24);

    & > a {
      display: inline-block;
      margin-block-end: var(--space-8);
      color: var(--color-muted);
      font-size: var(--text-small);
      line-height: var(--leading-small);
    }

    & h1 {
      display: flex;
      align-items: center;
      gap: var(--space-12);
      margin: 0;
    }

    & .tool-icon {
      inline-size: 40px;
      block-size: 40px;
    }
  }
}