@layer page {

  /* btn--nav, btn--side-nav */
  .btn--nav,
  .btn--side-nav {
    text-transform: uppercase;
  }

  .btn--side-nav {
    padding-inline: 32px;
    width: 100%;
  }

  .btn--side-nav:hover {
    background-color: var(--primary-5);
  }

  /* btn--round for round svg buttons */
  .btn--round {
    border-radius: 50%;
    padding: 6px 8px 0 8px;
  }

  /* btn--flat */
  .btn--flat {
    background-color: var(--primary-1);
    background-image: url("/butcher/assets/svg/arrow-right.svg");
    background-position: right 20px center;
    background-repeat: no-repeat;
    color: var(--white);
    padding: 10px 51px 10px 22px;
  }

  /* raised btn--shop, btn--trash */
  .btn--shop,
  .btn--trash {
    background-color: var(--light);
    background-position: left 16px center;
    background-repeat: no-repeat;
    box-shadow: var(--shadow-small);
    padding: 8px 16px 8px 44px;
  }

  .btn--shop {
    background-image: url("/butcher/assets/svg/shop.svg");
    color: var(--inform);
  }

  .btn--trash {
    background-image: url("/butcher/assets/svg/trash.svg");
    color: var(--danger);
  }

  .btn--shop:hover,
  .btn--trash:hover {
    background-color: var(--white);
  }

  /* subpage navigation buttons */
  .btn--nav-shop,
  .btn--nav-favorites,
  .btn--nav-cart {
    background-position: left 4px center;
    background-repeat: no-repeat;
    padding: 8px 4px 8px 26px;
  }

  .btn--nav-shop {
    background-image: url("/butcher/assets/svg/shop.svg");
  }

  .btn--nav-favorites {
    background-image: url("/butcher/assets/svg/heart.svg");
  }

  .btn--nav-cart {
    background-image: url("/butcher/assets/svg/cart4.svg");
  }

  /* btn--top scrolls to top of page */
  .btn--top {
    background: var(--overlay);
    bottom: max(70px, 10dvh);
    color: var(--white);
    display: none;
    position: fixed;
    right: 2px;
  }
}