
// @require ../carousel.scss
// @require widgets/icon/icon.scss

//TODO: Add proper dark shadow at the left and the right

/* INSET */

.carousel.inset {

  /* PREVIOUS / NEXT */

  .carousel-previous,
  .carousel-next {

    @include absolute ( 0 false 0 false );
    z-index: $carousel-inset-previous-next-z-index !important;
    display: flex;
    align-items: center;
    font-size: $carousel-inset-previous-next-font-size;
    cursor: pointer;

    /* AFTER (ICON) */

    &:after {
      @extend %icon-base;
      color: $carousel-inset-previous-next-color;
      opacity: $carousel-inset-previous-next-opacity;
      transition: opacity $carousel-inset-previous-next-animation-duration;
    }

  }

  /* PREVIOUS */

  .carousel-previous {

    justify-content: flex-start;
    left: 0;
    padding-left: $gutter;
    width: $carousel-inset-previous-width;

    /* AFTER (ICON) */

    &:after {
      content: $carousel-inset-previous-icon;
    }

  }

  /* NEXT */

  .carousel-next {

    justify-content: flex-end;
    right: 0;
    padding-right: $gutter;
    width: $carousel-inset-next-width;

    /* AFTER (ICON) */

    &:after {
      content: $carousel-inset-next-icon;
    }

  }

  /* HOVER */

  &:hover {

    /* PREVIOUS / NEXT */

    .carousel-previous,
    .carousel-next {

      /* AFTER (ICON) */

      &:after {
        opacity: $carousel-inset-hover-previous-next-opacity;
      }

      /* HOVER */

      &:not(.disabled):hover {

        /* AFTER (ICON) */

        &:after {
          opacity: $carousel-inset-previous-next-hover-opacity;
        }

      }

    }

  }

}
