.block-subnav {
  position: relative;
  margin-bottom: 4rem;
}

p + .block-subnav,
.wp-block-heading + .block-subnav {
  margin-block-start: 4rem !important;
}

.block-subnav.overflowing:before {
  content: '';
  position: absolute;
  z-index: 3;
  right: 0;
  top: 0;
  width: 40px;
  height: 48px;
  pointer-events: none;
  background: linear-gradient(270deg, hsla(0, 0%, 100%, 1) 0%, hsla(0, 0%, 100%, .5) 60%, hsla(0, 0%, 100%, 0) 100%);
  border-radius:0 10px 10px 0;
}

.has-neutral-0-background-color .block-subnav.overflowing:before,
.has-green-radial-background-gradient-background .block-subnav.overflowing:before {
  background: linear-gradient(270deg, hsla(0, 0%, 10%, 1) 0%, hsla(0, 0%, 10%, .5) 60%, hsla(0, 0%, 10%, 0) 100%);
}

.block-subnav.overflowing:after {
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="16.117" height="8.172" viewBox="0 0 16.117 8.172"><path d="M69.241-18.178a1,1,0,0,1,.109-1.409L71-21H61.12l1.648,1.412a1,1,0,0,1,.109,1.409,1,1,0,0,1-.76.35.994.994,0,0,1-.65-.241l-2.8-2.4A1.9,1.9,0,0,1,58-21.914a1.9,1.9,0,0,1,.664-1.443l2.8-2.4a1,1,0,0,1,1.41.108,1,1,0,0,1-.109,1.41L61.321-23H70.8l-1.447-1.24a1,1,0,0,1-.109-1.41,1,1,0,0,1,1.41-.108l2.8,2.4a1.9,1.9,0,0,1,.663,1.443,1.9,1.9,0,0,1-.663,1.443l-2.8,2.4a1,1,0,0,1-.651.241A1,1,0,0,1,69.241-18.178Z" transform="translate(-58 26)" fill="%234E4F4D"/></svg>');
  position: absolute;
  z-index: 4;
  right: 8px;
  top: 10px;
  pointer-events: none;
}

.has-neutral-0-background-color .block-subnav.overflowing:after,
.has-green-radial-background-gradient-background .block-subnav.overflowing:after {
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="16.117" height="8.172" viewBox="0 0 16.117 8.172"><path d="M69.241-18.178a1,1,0,0,1,.109-1.409L71-21H61.12l1.648,1.412a1,1,0,0,1,.109,1.409,1,1,0,0,1-.76.35.994.994,0,0,1-.65-.241l-2.8-2.4A1.9,1.9,0,0,1,58-21.914a1.9,1.9,0,0,1,.664-1.443l2.8-2.4a1,1,0,0,1,1.41.108,1,1,0,0,1-.109,1.41L61.321-23H70.8l-1.447-1.24a1,1,0,0,1-.109-1.41,1,1,0,0,1,1.41-.108l2.8,2.4a1.9,1.9,0,0,1,.663,1.443,1.9,1.9,0,0,1-.663,1.443l-2.8,2.4a1,1,0,0,1-.651.241A1,1,0,0,1,69.241-18.178Z" transform="translate(-58 26)" fill="%23fff"/></svg>');
}

.subnav-nav-wrapper {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -ms-overflow-style: none;
  display: flex;
  scrollbar-width: thin;
  scrollbar-color: var(--wp--preset--color--neutral-6) transparent;
  justify-content: center;
}

.has-neutral-0-background-color .subnav-nav-wrapper,
.has-green-radial-background-gradient-background .subnav-nav-wrapper {
  scrollbar-color: var(--wp--preset--color--neutral-1) transparent;
}

.subnav-nav-wrapper.overflowing {
  justify-content: flex-start;
  border-radius:0 10px 10px 0;
}

.subnav-nav-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.subnav-nav-wrapper::-webkit-scrollbar-thumb {
  background: var(--wp--preset--color--neutral-1);
  border-radius: 10px;
}

.block-subnav-nav {
  display: flex;
  gap: 10px;
  position: relative;
  white-space: nowrap;
  background-color: var(--wp--preset--color--neutral-8);
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 auto;
  width: max-content;
}

.overflowing .block-subnav-nav {
  overflow: unset;
  padding-right: 30px;
}

.has-neutral-0-background-color .block-subnav-nav,
.has-green-radial-background-gradient-background .block-subnav-nav {
  background-color: rgba(0, 0, 0, 0.5);
}

.subnav-button {
  display: inline-block;
  padding: 16px 20px 15px;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 10px;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  font-family: var(--wp--preset--font-family--poppins);
  font-weight: 600;
  font-size: .875rem;
  line-height: 1.2;
  color: var(--wp--preset--color--neutral-1);
  text-decoration: none;
}

.editor-styles-wrapper .subnav-button {
  cursor: default;
  pointer-events: none;
}

.subnav-button__label {
  position: relative;
  z-index: 1;
}

.subnav-button:hover,
.subnav-button.--is-active {
  color: var(--wp--preset--color--neutral-1);
}

.has-neutral-0-background-color .subnav-button,
.has-green-radial-background-gradient-background .subnav-button,
.has-neutral-0-background-color .subnav-button:hover,
.has-green-radial-background-gradient-background .subnav-button:hover,
.has-neutral-0-background-color .subnav-button.--is-active,
.has-green-radial-background-gradient-background .subnav-button.--is-active {
  color: var(--wp--preset--color--white);
}

/* Match tabs indicator look on active and hover */
.has-neutral-0-background-color .subnav-button:hover,
.has-green-radial-background-gradient-background .subnav-button:hover,
.has-neutral-0-background-color .subnav-button.--is-active,
.has-green-radial-background-gradient-background .subnav-button.--is-active {
  background: radial-gradient(70% 160% at 50% 134%, rgba(217,239,94,.3) 0%, rgba(51,185,82,.4) 37.5%, rgba(39,40,39,.2) 100%);
  text-decoration: none;
}

.subnav-button .glowing-border {
  --igradient: linear-gradient(163deg, #33B952 8.33%, #D9EF5E 47.49%, #F26D07 65%);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.subnav-button .glowing-border:after {
  border-radius: 10px;
}

.subnav-button .glowing-border-2 {
  filter: blur(3px);
}

.subnav-button:hover .glowing-border,
.subnav-button.--is-active .glowing-border {
  opacity: 1;
}

.subnav-button:hover .glowing-border-2,
.subnav-button.--is-active .glowing-border-2 {
  opacity: .3;
}

@media (max-width: 781px) {
  .subnav-nav-wrapper {
    flex-direction: column;
    align-items: stretch;
    overflow-x: visible;
  }

  .block-subnav-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .block-subnav.overflowing:before,
  .block-subnav.overflowing:after {
    display: none;
  }

  .subnav-nav-wrapper.overflowing {
    justify-content: stretch;
    padding-right: 0;
  }
}