/*-----------------------------------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------------------------------------------------*/

/* ---------------------------------------------------------
   Circular Arrow
  --------------------------------------------------------- */

.game-arrow,
.feature-board-arrow {
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  top: calc(50% - 3.5rem/2);
  font-size: 1.75rem;
  color: var(--white-color-1);
  z-index: 200;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
  line-height: 1;
  border-radius: 50%;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  -webkit-tap-highlight-color: transparent;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
}

.game-arrow svg,
.feature-board-arrow svg {
  height: 50%;
  width: 50%;
}

.game-left-arrow,
.feature-board-left-arrow {
  left: 0.45rem;
}

.game-right-arrow,
.feature-board-right-arrow {
  right: 0.4rem;
}


.game-arrow,
.feature-board-arrow {
  background-color: var(--section-dark-background-color);
  border: 1px solid var(--section-light-background-color);
}



.game-arrow.active,
.feature-board-arrow.active {
  background: var(--card-color, var(--site-background-gradient));
}



@media (hover: hover) and (pointer: fine) {

  .game-arrow:hover,
  .feature-board-arrow:hover {
    background: var(--card-color, var(--site-background-gradient));
  }

  .game-arrow.active,
  .feature-board-arrow.active {
    background: none;
    background-color: var(--section-dark-background-color);
  }
}



.game-arrow.inactive,
.feature-board-arrow.inactive {
  background-color: var(--section-dark-background-color);
  opacity: 0.5;
  cursor: not-allowed;
}



/* ---------------------------------------------------------
   Square Arrow — Core styles (database, recommended, similar)
   v2 — egXXL styles moved to separate file
--------------------------------------------------------- */

/* Base arrow styles (excludes egXXL) */
.database-slider-arrow,
.recommended-arrow,
.similar-arrow {
  position: absolute;
  color: var(--white-color-1);
  z-index: 200;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  -webkit-tap-highlight-color: transparent;
}

/* Recommended & Similar */
.recommended-arrow,
.similar-arrow {
  width: 2rem;
  height: 4rem;
  top: calc(50% - 4em/2);
  border: 1px solid var(--section-light-background-color);
  background-color: var(--section-dark-background-color);
}

/* Database slider */
.database-slider-arrow {
  width: 2rem;
  height: 4rem;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--section-medium-background-color);
  background-color: var(--section-dark-background-color);
}

.database-slider-arrow svg,
.recommended-arrow svg,
.similar-arrow svg {
  color: #fff;
  width: 2.35rem;
  height: 2.35rem;
}

/* Left and right arrows for database slider */
.database-slider-left-arrow {
  left: 0.25rem;
}

.database-slider-right-arrow {
  right: 0.25rem;
}

/* Active state */
.database-slider-arrow.active,
.recommended-arrow.active,
.similar-arrow.active {
  background-color: var(--card-color);
}

/* Hover styles (pointer capable devices) */
@media (hover: hover) and (pointer: fine) {

  .database-slider-arrow:hover,
  .recommended-arrow:hover,
  .similar-arrow:hover {
    background-color: var(--card-color);
  }

  .database-slider-arrow.active,
  .recommended-arrow.active,
  .similar-arrow.active {
    background-color: var(--section-dark-background-color);
  }

}

/* Inactive state */
.database-slider-arrow.inactive,
.recommended-arrow.inactive,
.similar-arrow.inactive {
  background-color: var(--section-dark-background-color);
  opacity: 0.25;
  cursor: not-allowed;
}