@import "~inuitcss/settings/settings.core";

$arrow-size: 40px;

.base {
  margin-bottom: $inuit-global-spacing-unit;

  // Restyling the Slick classes:

  :global {
    .slick-arrow {
      width: $arrow-size;
      height: $arrow-size;
    }

    .slick-prev:before,
    .slick-next:before {
      font-size: $arrow-size;
      line-height: $arrow-size;
    }

    .slick-next {
      right: 0;
      margin-right: $inuit-global-spacing-unit-small;
    }

    .slick-prev {
      left: 0;
      margin-left: $inuit-global-spacing-unit-small;

      // HACK Puts the arrow above the slider.
      z-index: 1;
    }

    .slick-slide {
      height: $inuit-global-spacing-unit-large*12;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;

      // We don't want any of the slides having margins, especially at the bottom.
      // This keeps the dots and the sliders fit snug together.
      margin: 0;
    }

    .slick-dots {
      // Removes the default positioning of the dots so we can use plain margins.
      // The dots ended up clipping into the content below them because of the
      // absolute positioning they use by default..
      position: inherit;
      bottom: 0;
    }
  }
}

@import "~inuitcss/settings/settings.core";

$arrow-size: 40px;

.base {
  margin-bottom: $inuit-global-spacing-unit;

  // Restyling the Slick classes:

  :global {
    .slick-arrow {
      width: $arrow-size;
      height: $arrow-size;
    }

    .slick-prev:before,
    .slick-next:before {
      text-shadow: 0 0 4px #888;
      opacity: 1;
      font-size: $arrow-size;
      line-height: $arrow-size;
    }

    .slick-next {
      right: 0;
      margin-right: $inuit-global-spacing-unit-small;
    }

    .slick-prev {
      left: 0;
      margin-left: $inuit-global-spacing-unit-small;

      // HACK Puts the arrow above the slider.
      z-index: 1;
    }

    .slick-slide {
      height: $inuit-global-spacing-unit-large*12;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;

      // We don't want any of the slides having margins, especially at the bottom.
      // This keeps the dots and the sliders fit snug together.
      margin: 0;
    }

    .slick-dots {
      // Removes the default positioning of the dots so we can use plain margins.
      // The dots ended up clipping into the content below them because of the
      // absolute positioning they use by default..
      position: inherit;
      bottom: 0;
    }
  }
}

Make the Slick arrows more visible
Make the Slick arrows more visible
