.spr-submenu-wrapper {
  --submenu-background-mask-ltr: linear-gradient(270deg, rgba(116, 139, 217, 1) 0%, rgba(116, 139, 217, 0) 100%);
  --submenu-background-mask-rtl: linear-gradient(90deg, rgba(27, 77, 130, 1) 0%, rgba(27, 77, 130, 0) 100%);

  position: relative;

  @media (max-width: 991px) {
    &::before,
    &::after {
      position: absolute;
      z-index: 5;
      top: 0;
      bottom: 0;
      left: 0;
      display: block;
      width: 2.5rem;
      height: 100%;
      content: "";
      background: var(--submenu-background-mask-rtl);
    }

    &::after {
      right: 0;
      left: auto;
      background: var(--submenu-background-mask-ltr);
    }
  }
}

.spr-submenu {
  display: flex;
  overflow-x: auto;
  background-image: var(--gradient-1);
  background-position: var(--gradient-1-position);
  background-size: var(--gradient-1-size);
  padding-block: var(--space-small);
  padding-inline: var(--padding-horizontal-main);

  div {
    position: relative;
    display: flex;
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    padding-inline: 0 var(--space-small);
  }
}

.spr-submenu:has(.spr-submenu-list) div::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 0.0625rem;
  height: 100%;
  content: "";
  background: var(--color-white);
}

.spr-submenu-list {
  display: flex;
  align-items: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;

  .spr-submenu-item a {
    display: block;
    white-space: nowrap;
    text-decoration: none;
    color: var(--color-white);
    font-size: var(--font-size-xxs);
    line-height: var(--line-height-text);
    padding-block: calc(var(--size-05) + 2px);
    padding-inline: var(--size-10);

    &:hover,
    &.is-active {
      text-decoration: underline;
      text-underline-offset: 0.25rem;
    }

    @media (min-width: 992px) {
      padding-inline: var(--size-15);
    }
  }
}

.spr-submenu-wrapper .spr-icon-link {
  text-decoration: none;
  color: var(--color-white);
  font-weight: var(--font-weight-regular);
  padding-block: var(--size-05);
  gap: var(--space-x-small);

  &:hover {
    text-decoration: underline;
    color: var(--color-white);
    text-underline-offset: 0.25rem;
  }

  svg {
    transform: rotate(180deg);
  }
}