/* A sideways shelf: scroll-snap on phones, arrow buttons on wider screens. */

.g-shelf {
  position: relative;
}

.g-shelf__track {
  display: grid;
  grid-auto-flow: column;
  gap: 16px;
  margin-inline: -16px;
  padding: 4px 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}

.g-shelf__track::-webkit-scrollbar {
  display: none;
}

.g-shelf__track > * {
  scroll-snap-align: start;
}

.g-shelf__nav {
  display: none;
}

/* Inside a heading band the buttons sit at the band's right end. */
.g-columnists .g-shelf__nav {
  top: 10px;
  right: 12px;
}

@media (min-width: 768px) {
  .g-shelf__track {
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  .g-shelf__nav {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: flex;
    gap: 8px;
  }

  .g-shelf--static .g-shelf__nav {
    display: none;
  }

  .g-shelf__prev,
  .g-shelf__next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--wp--preset--color--stone);
    background: var(--wp--preset--color--paper);
    color: var(--wp--preset--color--ink);
    cursor: pointer;
  }

  .g-shelf__prev:disabled,
  .g-shelf__next:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .g-shelf__prev:not(:disabled):hover,
  .g-shelf__next:not(:disabled):hover {
    border-color: var(--wp--preset--color--brand);
    color: var(--wp--preset--color--brand);
  }

  /* The heading's "Tümünü gör" makes room for the buttons. */
  .g-shelf:has(.g-shelf__nav):not(.g-shelf--static) .g-section-heading {
    padding-right: 104px;
  }
}