@layer components {
  .tool-nav {
    --bg: var(--color-canvas);
    --offset: 4px;
    --radius: 4px;
    --transition: all 350ms cubic-bezier(0.5, 2.5, 0.5, 1);

    display: flex;
    gap: 0.5ch;
    justify-content: center;

    @media (max-width: 479px) {
      margin-inline: -0.75rem;
    }

    @media (min-width: 480px) {
      gap: 1ch;
    }
  }

  .tool-nav__link {
    color: inherit;
    display: flex;
    flex: 1;
    max-inline-size: 240px;
    flex-direction: column;
    position: relative;
    transition: var(--transition);

    &:before,
    &:after {
      background-color: var(--bg);
      display: block;
      block-size: 16px;
      border: 1px solid var(--color-theme-lighter);
      border-block-end: none;
      border-radius: var(--radius) var(--radius) 0 0;
      content: "";
      margin: 0 auto calc(var(--offset) * -3);
      transition: var(--transition);
    }

    &:before {
      inline-size: calc(100% - 2ch);
      order: -2;
    }

    &:after {
      inline-size: calc(100% - 1ch);
      order: -1;
    }

    /* Fan cards on hover and focus */
    &:hover,
    &:focus-visible {
      box-shadow: none;
      outline: none;
      translate: 0 calc(var(--offset) / -4);

      .tool-nav__card {
        border-color: var(--color-theme-light);
      }

      &:nth-child(1) {
        &:before { transform: rotate(0.5deg) translateY(calc(var(--offset) * -1)); }
        &:after { transform: rotate(-0.5deg) translateY(calc(var(--offset) * -0.5)); }
      }

      &:nth-child(2) {
        &:before { transform: rotate(-0.75deg) translateY(calc(var(--offset) * -1)); }
        &:after { transform: rotate(0.75deg) translateY(calc(var(--offset) * -0.5)); }
      }

      &:nth-child(3) {
        &:before { transform: rotate(-0.5deg) translateY(calc(var(--offset) * -1)); }
        &:after { transform: rotate(0.5deg) translateY(calc(var(--offset) * -0.5)); }
      }
    }

    /* More pronounced border when using keyboard only */
    &:focus-visible {
      .tool-nav__card {
        border-color: var(--color-theme);
      }
    }
  }

  .tool-nav__card {
    background: var(--bg);
    border-radius: var(--radius);
    border: 1px solid var(--color-theme-light);
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    font-size: var(--txt-small);
    font-weight: 800;
    gap: 0.5ch;
    padding: 0.5rem 0;
    place-items: center;
    position: relative;
    transition: border-color 100ms ease-out;

    @media (min-width: 480px) {
      font-size: var(--txt-medium);
      padding: 1rem;
    }
  }

  .tool-nav__icon {
    color: var(--color-theme);
    font-size: var(--txt-x-large);

    @media (min-width: 480px) {
      font-size: var(--txt-xx-large);
    }
  }
}