@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;
    }
  }

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