@use '../variables' as variables;

.slider {
  .prev-button,
  .next-button {
    transition: 0.15s;

    &:disabled {
      opacity: 0;
    }
  }

  .prev-button {
    &,
    &::after {
      left: 0;
    }
  }

  .next-button {
    &,
    &::after {
      right: 0;
    }
  }

  .slider-fade {
    --deprecated: 'WARNING: This class will be removed with the next major version';
    height: 100%;
    opacity: 0;
    pointer-events: none;
    top: 0;
    transition: 0.15s;
    width: 75px;
  }

  .slider-fade-next {
    background-image: linear-gradient(to right, rgba(variables.$white, 0) 25%, variables.$white);
    right: 0;
  }

  .slider-fade-prev {
    background-image: linear-gradient(to left, rgba(variables.$white, 0) 25%, variables.$white);
    left: 0;
  }
}

.slider-container:not(.rw-prev-disabled) ~ .slider-fade-prev,
.slider-container:not(.rw-next-disabled) ~ .slider-fade-next {
  opacity: 1;
}