//colors
$white: transparent;
$white_75: transparent;
$color_azure_radiance_approx: #09f;
$color_mine_shaft_approx: #002652;

.flickity-enabled {
  position: relative;
  &:focus {
    outline: none;
  }
  &.is-draggable {
    tap-highlight-color: transparent;
    //Instead of the line below you could use @include user-select($select)
    user-select: none;
    .flickity-viewport {
      cursor: move;
      cursor: grab;
      &.is-pointer-down {
        cursor: grabbing;
      }
    }
  }
}
.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}
.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}
.flickity-prev-next-button {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  border: none;
  //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 50%;
  background: $white;
  background: $white_75;
  cursor: pointer;
  //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
  transform: translateY(-50%);

  @media screen and (max-width: 960px) {
    width: 30px;
    height: 30px;
  }

  @media screen and (max-width: 640px) {
    display: none;
  }

  &:hover {
    background: $white;
  }
  &:focus {
    outline: none;
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: 0 0 0 5px $color_azure_radiance_approx;
  }
  &:active {
    opacity: 0.6;
  }
  &.previous {
    right: 50px;

    @media screen and (max-width: 960px) {
      right: 42px;
    }
  }
  &.next {
    right: 20px;
  }
  &:disabled {
    opacity: 0.3;
    cursor: auto;
  }
  svg {
    position: absolute;
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%;
  }
  .arrow {
    fill: $color_mine_shaft_approx;
  }
}
.flickity-rtl {
  .flickity-prev-next-button {
    &.previous {
      left: auto;
      right: 10px;
    }
    &.next {
      right: auto;
      left: 10px;
    }
  }
  .flickity-page-dots {
    direction: rtl;
  }
}
.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -30px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
  .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: $color_mine_shaft_approx;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 50%;
    opacity: 0.15;
    cursor: pointer;
    transition: opacity .3s ease-in-out;
    &.is-selected {
      opacity: 1;
    }

    @media screen and (max-width: 640px) {
      width: 7px;
      height: 7px;
    }
  }
}