/* ==========================================================================
   Slider.
   ========================================================================== */
.slider {
  position: relative;
  margin-bottom: var(--space-xl);

  .slider-item {
    position: relative;
    width: 100%;

    img {
      width: auto;
    }

    > a {
      display: block;
    }
  }

  &.l-same-height {
    .slider-item,
    .item-wrapper {
      height: 100%;
      box-sizing: border-box;
    }
  }
}

.slider-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  .tns-item:not(.tns-slide-active) {
    visibility: hidden;
  }

  /* Responsive.
     ========================================================================== */
  @media screen and (min-width: 80em) {
    flex-wrap: nowrap;
  }
}

.tns-liveregion {
  display: none;
}

.tns-outer {
  position: relative;
}


/* ==========================================================================
   Pager.
   ========================================================================== */
.tns-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  z-index: 5;
  left: 0;
  right: var(--gutter-m);
  bottom: var(--space-xl);
  margin: 0;

  button {
    padding: 0;
    background: none;

    &:before {
      content: "";
      display: block;
      width: 20px;
      height: 20px;
      margin: 0 5px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, .5);
      box-sizing: border-box;
      transform: scale(1);
      transition: .2s;
    }

    &.tns-nav-active {
      cursor: default;
    }

    &.tns-nav-active,
    &:not(.tns-nav-active):focus,
    &:not(.tns-nav-active):hover {
      &:before {
        background-color: var(--color-fg-primary);
      }
    }
  }
}

/* ==========================================================================
   Homepage.
   ========================================================================== */
.slider--primary {
  /* Responsive.
     ========================================================================== */
  @media screen and (max-width: 80em) {
    margin-bottom: 0;
  }
}