.containerWrapper {
  position: sticky;
  top: 0;
  z-index: var(--hotel-tab-navigation-z-index);
  background-color: var(--Surface-Secondary-Default);
  border-bottom: 1px solid var(--Border-Default);
  width: 100%;

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 76px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &::before {
    left: 0;
    background: linear-gradient(
      -90deg,
      rgba(242, 236, 230, 0.1) 6%,
      rgba(242, 236, 230, 1) 90%
    );
  }
  &::after {
    right: 0;
    background: linear-gradient(
      90deg,
      rgba(242, 236, 230, 0.1) 6%,
      rgba(242, 236, 230, 1) 90%
    );
  }

  &.showLeftShadow::before,
  &.showRightShadow::after {
    opacity: 1;
  }
}

.tabsContainer {
  display: flex;
  gap: var(--Space-x4);
  justify-content: flex-start;
  width: var(--max-width-content);
  margin: 0 auto;
  overflow-y: hidden;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  white-space: nowrap;
  margin-bottom: -1px; /* Adjust for border overlap */
}

.link {
  color: var(--Text-Interactive-Default);
  padding: var(--Space-x2) var(--Space-x0);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-bottom-color 0.3s ease-in-out;

  &:hover,
  &.active {
    border-bottom-color: var(--Text-Interactive-Default);
  }
}

@media screen and (min-width: 1367px) {
  .tabsContainer {
    padding: 0 var(--Space-x5);
    overflow-x: visible;
    margin: 0;
  }
}
