@import '../../global';

@mixin shadow($direction) {
  background: linear-gradient(
    to $direction,
    transparent 0%,
    rgba(0, 0, 0, 0.25) 100%
  );
}

.slider {
  overflow: hidden;

  position: relative;

  height: 100%;
  width: 100%;

  &_buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;

    pointer-events: none;

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    z-index: 1;
  }

  &_button {
    pointer-events: all;
    cursor: pointer;

    height: 100%;
    width: 15%;
    display: inline-flex;
    justify-content: center;
    align-items: center;

    color: color('white');

    &__next {
      @include shadow(right);
    }

    &__previous {
      @include shadow(left);
    }
  }

  &_dots {
    position: absolute;
    left: 50%;
    bottom: $push_lg;
    transform: translate(-50%);

    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }

  &_dot {
    width: 20px;
    height: 3px;

    background-color: rgba(255, 255, 255, 0.25);

    margin: 0 $push_sm;

    &:after {
      display: block;
      content: '';
      background-color: color('white');
      height: inherit;
      width: 0%;
    }

    &__active {
      &:after {
        width: 100%;
      }
    }

    &__animate {
      &:after {
        transition: width 5s;
        width: 100%;
      }
    }
  }
}