/* Prev/next arrows for the tips sliders. Plain CSS, not part of the webpack build.
   Same look as the reviews slider arrows; desktop only (smaller screens keep the dots). */
.c-tips-slider__nav {
  display: none;
}

@media (min-width: 1024px) {
  .c-tips-slider__action-col {
    display: flex;
    align-items: center;
  }

  .c-tips-slider__nav {
    display: flex;
    margin-right: 1.6rem;
  }

  .c-tips-slider__nav.is-hidden {
    display: none;
  }

  .c-tips-slider__nav-prev,
  .c-tips-slider__nav-next {
    width: 4rem;
    height: 4rem;
    padding: 0;
    border: 0;
    background: var(--color-white, #fff);
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .04), 0 0 1px rgba(0, 0, 0, .04), inset 0 0 0 1px var(--color-grey-30, #e8e8e8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .c-tips-slider__nav-prev {
    margin-right: .8rem;
  }

  .c-tips-slider__nav-prev:disabled,
  .c-tips-slider__nav-next:disabled {
    opacity: .4;
    cursor: default;
  }

  .c-tips-slider__nav-prev svg,
  .c-tips-slider__nav-next svg {
    width: 2rem;
    height: 2rem;
  }
}