/* =========================
   TAB NAV
========================= */
.tab-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--light-bg);
  gap: 12px;
}

.nav-arrow {
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--base);
}

.not-pc .nav-arrow {
  display: none;
}

.tab-nav-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 15px 0;
}

.not-pc .tab-nav-scroll {
  scrollbar-width: none;
  animation: scroll-shadow;
  animation-timeline: scroll(self x);
}

.tab-nav-scroll-button {
  color: var(--text-bg-white);
  cursor: pointer;
  transition: 0.1s;
}

.tab-nav-scroll-button.active {
  color: var(--accent);
}

@keyframes scroll-shadow {
  0% {
    box-shadow: inset -8dvw 0 8dvw -8dvw rgba(0, 0, 0, 0.8);
  }

  10%, 90% {
    box-shadow: inset -5dvw 0 5dvw -5dvw rgba(0, 0, 0, 0.6), inset 5dvw 0 5dvw -5dvw rgba(0, 0, 0, 0.6);
  }

  100% {
    box-shadow: inset 8dvw 0 8dvw -8dvw rgba(0, 0, 0, 0.8);
  }
}

/* =========================
   TAB NAV CONTENTS
========================= */
main {
  display: flex;
}

.tab-nav-content {
  display: none;
  background-color: var(--bg-base);
  padding: 50px 0;
  width: 100%;
}

.tab-nav-content.active {
  display: block;
}