/**
 * @file
 * Provides ui-related styles.
 */

.is-sbox-mounted .splidebox__nav {
  position: fixed;
  z-index: 9999;
  top: -1px;
  left: 0;
  width: 100%;
  width: 100vw;
  height: var(--sbox-nav);
}

.splidebox .splidebox__nav svg,
.splidebox .splidebox__tn svg {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.splidebox .splidebox__nav button,
.splidebox .splidebox__counter {
  position: absolute;
  top: -1px;
  padding: 8px;
}

.splidebox .splidebox__nav button,
.splidebox .splidebox__tn {
  right: 10px;
  width: var(--sbox-btn);
  height: var(--sbox-btn);
  padding: 8px;
  cursor: pointer;
  outline: none;
  line-height: 18px;
}

.splidebox .splidebox__tn {
  position: absolute;
  z-index: 9999;
  right: var(--sbox-btn-tn-space);
  bottom: var(--sbox-btn-tn-space);
  line-height: 18px;
}

.splidebox .splidebox__counter {
  left: 10px;
  height: var(--sbox-btn);
  user-select: none;
  font-size: var(--sbox-counter);
  line-height: var(--sbox-counter-lh);
}

.splidebox .splidebox__nav .splidebox__fullscreen {
  right: 56px;
}

/* 1408px = 88em on 16px base font size. */
@media only screen and (min-width: 1408px) {
  .splidebox .splidebox__nav .splidebox__fullscreen {
    right: 68px;
  }

  .splidebox .splidebox__tn {
    line-height: 28px;
  }
}