@media (max-width: 479px) {
    .button_main_wrap[data-mobile-full-width='true'],
    .button_link[data-mobile-full-width='true'],
    .button_secondary_wrap[data-mobile-full-width='true'] {
      width: 100%;
    }
  }

  /* Primary Button */
  .button_main_wrap {
    --ease: cubic-bezier(0.21, 1, 0.34, 1);
    --color-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
    --speed: 0.45s;
    --speed-fast: 0.3s;
    --speed-faster: 0.15s;
  }

  @media (hover: hover) and (pointer: fine) {
    .button_main_wrap .clickable_wrap::before {
      content: '';
      display: block;
      position: absolute;
      background-color: var(--_button---primary--background-hover);
      inset: 0;
      width: 100%;
      height: 100%;
      clip-path: inset(100% 0.75rem 0 0.75rem round 0.25rem 0.25rem 0 0);
      transition: clip-path var(--speed) var(--ease);
    }

    .button_main_wrap .clickable_wrap:hover::before,
    .button_main_wrap .clickable_btn:focus-visible::before {
      clip-path: inset(0 0 0 0 round 0.25rem);
    }

    .button_main_wrap .button_text {
      color: var(--_button---primary--text-hover);
      text-shadow: 0 -2em 0 var(--_button---primary--text);
      transform: translateY(2em);
      transition:
        transform var(--speed) var(--ease),
        text-shadow var(--speed-faster) var(--color-ease);
    }

    .button_main_wrap:hover .button_text,
    .button_main_wrap:focus-visible .button_text {
      transform: translateY(0);
      text-shadow: 0 -2em 0 var(--_button---primary--text);
    }
  }

  /* Secondary Button */
  .button_secondary_wrap {
    text-decoration: none;
    position: relative;
  }

  .button_secondary_wrap::before {
    content: '';
    position: absolute;
    bottom: -0.0625em;
    left: 0;
    width: 100%;
    height: 0.0625em;
    background-color: currentColor;
    transition: transform 0.45s cubic-bezier(0.21, 1, 0.34, 1);
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
  }

  @media (hover: hover) and (pointer: fine) {
    .button_secondary_wrap:hover::before {
      transform-origin: left;
      transform: scaleX(1) rotate(0.001deg);
    }
  }

  /* Tertiary Button */
  .button_main_wrap.is-tertiary {
    --ease: cubic-bezier(0.21, 1, 0.34, 1);
    --color-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
    --speed: 0.45s;
    --speed-fast: 0.3s;
    --speed-faster: 0.15s;
  }

  @media (hover: hover) and (pointer: fine) {
    .button_main_wrap.is-tertiary .clickable_wrap::before {
      content: '';
      display: block;
      position: absolute;
      background-color: var(--_button---tertiary--background-hover);
      inset: 0;
      width: 100%;
      height: 100%;
      clip-path: inset(100% 0.75rem 0 0.75rem round 0.25rem 0.25rem 0 0);
      transition: clip-path var(--speed) var(--ease);
    }

    .button_main_wrap.is-tertiary .clickable_wrap:hover::before,
    .button_main_wrap.is-tertiary .clickable_btn:focus-visible::before {
      clip-path: inset(0 0 0 0 round 0.25rem);
    }

    .button_main_wrap.is-tertiary .button_text {
      color: var(--_button---tertiary--text-hover);
      text-shadow: 0 -2em 0 var(--_button---tertiary--text);
      transform: translateY(2em);
      transition:
        transform var(--speed) var(--ease),
        text-shadow var(--speed-faster) var(--color-ease);
    }

    .button_main_wrap.is-tertiary:hover .button_text,
    .button_main_wrap.is-tertiary:focus-visible .button_text {
      transform: translateY(0);
      text-shadow: 0 -2em 0 var(--_button---tertiary--text);
    }
  }

  /* Icon Button */
  .button_main_wrap.is-icon {
    --ease: cubic-bezier(0.21, 1, 0.34, 1);
    --color-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
    --speed: 0.45s;
    --speed-fast: 0.3s;
    --speed-faster: 0.15s;
  }

  @media (hover: hover) and (pointer: fine) {
    .button_main_wrap.is-icon .clickable_wrap::before {
      content: '';
      display: block;
      position: absolute;
      background-color: var(--_button---icon--background-hover);
      inset: 0;
      width: 100%;
      height: 100%;
      clip-path: inset(100% 0.75rem 0 0.75rem round 0.25rem 0.25rem 0 0);
      transition: clip-path var(--speed) var(--ease);
    }

    .button_main_wrap.is-icon .clickable_wrap:hover::before,
    .button_main_wrap.is-icon .clickable_btn:focus-visible::before {
      clip-path: inset(0 0 0 0 round 0.25rem);
    }

    .button_main_wrap.is-icon .button_text {
      color: var(--_button---icon--text-hover);
      text-shadow: 0 -2em 0 var(--_button---icon--text);
      transform: translateY(2em);
      transition:
        transform var(--speed) var(--ease),
        text-shadow var(--speed-faster) var(--color-ease);
    }

    .button_main_wrap.is-icon:hover .button_text,
    .button_main_wrap.is-icon:focus-visible .button_text {
      transform: translateY(0);
      text-shadow: 0 -2em 0 var(--_button---icon--text);
    }
  }

  /* Radio Buttons */
  .blog-filter-radio {
    --ease: cubic-bezier(0.21, 1, 0.34, 1);
    --color-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
    --speed: 0.45s;
    --speed-fast: 0.3s;
    --speed-faster: 0.15s;
  }

  @media (hover: hover) and (pointer: fine) {
    .blog-filter-radio::before {
      content: '';
      display: block;
      position: absolute;
      background-color: var(--_button---radio--background-hover);
      inset: 0;
      width: 100%;
      height: 100%;
      clip-path: inset(100% 0.75rem 0 0.75rem round 0.25rem 0.25rem 0 0);
      transition: clip-path var(--speed) var(--ease);
    }

    .blog-filter-radio:hover::before,
    .blog-filter-radio:focus-visible::before {
      clip-path: inset(0 0 0 0 round 0.25rem);
    }

    .blog-filter-radio .blog-filter-radio_label {
      color: var(--_button---radio--text-hover);
      text-shadow: 0 -2em 0 var(--_button---radio--text);
      transform: translateY(2em);
      transition:
        transform var(--speed) var(--ease),
        text-shadow var(--speed-faster) var(--color-ease);
    }

    .blog-filter-radio:hover .blog-filter-radio_label,
    .blog-filter-radio:focus-visible .blog-filter-radio_label {
      transform: translateY(0);
      text-shadow: 0 -2em 0 var(--_button---radio--text);
    }
    .blog-filter-radio:has(.blog-filter-radio_radio.w--redirected-checked)::before {
      background-color: var(--_button---radio--background-active);
    }
  }

  .blog-filter-radio:has(.blog-filter-radio_radio.w--redirected-checked) {
    border: 1px solid var(--_button---radio--border-active);
    color: var(--_button---radio--text-hover);
  }

  .blog-filter-radio:has(.blog-filter-radio_radio.w--redirected-checked) .blog-filter-radio_label {
    color: var(--_button---radio--text-hover);
    text-shadow: 0 -2em 0 var(--_button---radio--text-hover);
  }

  /* Pagination Buttons */
  .button_main_wrap.is-pagination {
    --ease: cubic-bezier(0.21, 1, 0.34, 1);
    --color-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
    --speed: 0.45s;
    --speed-fast: 0.3s;
    --speed-faster: 0.15s;

    position: relative; /* anchor for ::before inset:0 */
    isolation: isolate; /* own stacking context */
    overflow: hidden; /* clip the fill's rounded corners */
  }

  @media (hover: hover) and (pointer: fine) {
    .button_main_wrap.is-pagination::before {
      content: '';
      display: block;
      position: absolute;
      z-index: -1; /* sit behind the text */
      background-color: var(--_button---primary--background-hover);
      inset: 0;
      width: 100%;
      height: 100%;
      clip-path: inset(100% 0.75rem 0 0.75rem round 0.25rem 0.25rem 0 0);
      transition: clip-path var(--speed) var(--ease);
    }

    .button_main_wrap.is-pagination:hover::before,
    .button_main_wrap.is-pagination:focus-visible::before {
      clip-path: inset(0 0 0 0 round 0.25rem);
    }

    /* Text styles applied directly to the link (color swap only) */
    .button_main_wrap.is-pagination .button_text {
      color: var(--_color---primary--dark-grey);
      text-shadow: 0 -2em 0 var(--_button---tertiary--text);
      transform: translateY(2em);
      transition:
        transform var(--speed) var(--ease),
        text-shadow var(--speed-faster) var(--color-ease);
    }

    .button_main_wrap.is-pagination:hover .button_text,
    .button_main_wrap.is-pagination:focus-visible .button_text {
      transform: translateY(0);
      text-shadow: 0 -2em 0 var(--_button---tertiary--text);
    }
  }