@mixin disable_slider_navigation() {
  opacity: 0.4;
  cursor: default;
  &:hover {
    transform: none;
    &:before, &:after {
      background: $green;
    }
  }
}

.slider {
  width: 100%;
  position: relative;
  margin: em(50px) 0;
}

.slider, .text_slider {
  @for $i from 0 through 10 {
    &[data-active="#{$i}"] {
      .slider__image__item {
        transform: translateX(-20%);
      }
      .slider__image__item.data_id_#{$i} {
        transform: none;
      }
      .slider__image__item.data_id_#{$i} ~ .slider__image__item {
        transform: translateX(100%);
      }

      .slider__texts__content, .text_slider__content {
        transform: translateX(-100% * $i);
      }
      .slider__text__item.data_id_#{$i}, .text_slider__item.data_id_#{$i} {
        opacity: 1;
      }

      &[data-last="#{$i}"] {
        .slider__navigation--next {
          @include disable_slider_navigation();
        }
      }
      .slider__text__item__email.data_id_#{$i} {
        transform: none;
        pointer-events: all;
        opacity: 1;
        & ~ .slider__text__item__email {
          transform: translateX(200%);
        }
      }
    }
    &[data-last="#{$i}"] {
      .text_slider__container {
        width: ($i + 1) * 100%;
      }
      .text_slider__item {
        width: 100% / ($i + 1);
      }
    }
  }
  &[data-active="0"] {
    .slider__navigation--prev {
      @include disable_slider_navigation();
    }
  }
}

.slider__content {
  width: 100%;
  position: relative;
  vertical-align: top;
  font-size: 0;
  white-space: nowrap;
}

.slider__navigation {
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 90px;
  line-height: 75px;
  text-align: center;
  font-size: 0;
  transform: none;
  opacity: 1;
  text-indent: 15px;
  direction: rtl;
  transition: opacity 0.2s ease-in-out;
  z-index: 10;
  svg {
    fill: $green;
    transition: fill 0.2s ease-in-out, transform 0.2s ease-in-out;
    display: inline-block;
    width: 35px;
    height: 35px;
    vertical-align: middle;
  }
  html.no-touchevents &:hover {
    svg {
      fill: darken($green, 10);
      transform: translateX(5px);
    }
  }
  @media screen and (max-width: $medium_breakpoint) {
    width: 65px;
    height: 65px;
    background: $white;
    line-height: 65px;
    text-indent: 0;
    svg {
      width: 25px;
      height: 25px;
    }
  }
}

.slider__navigation--prev {
  right: 90px;
  direction: ltr;
  &:hover {
    svg {
      transform: translateX(-5px);
    }
  }
  @media screen and (max-width: $medium_breakpoint) {
    right: 65px;
  }
}

.slider__images__frame {
  overflow: hidden;
  //right: em(180px);
  width: calc(100% - 180px);
  display: inline-block;
  z-index: -1;
  padding-bottom: 50%;
  position: relative;
  @media screen and (max-width: $medium_breakpoint) {
    width: 90%;
    padding-bottom: 70%;
  }
}

.slider__next {
  color: $white;
  text-decoration: none;
  span {
    border-bottom: 1px solid rgba($white, 0.5);
    display: inline-block;
  }
  svg {
    height: em(18px);
    width: em(18px);
    transform: none;
    transition: transform 0.2s, opacity 0.2s;
    margin-left: em(5px);
    vertical-align: baseline;
    fill: $white;
    opacity: 0.5;
    position: relative;
    top: em(4px);
  }
  &:hover {
    svg {
      transform: translateX(em(5px));
      opacity: 1;
    }
  }
}

.slider__images {
  position: absolute;
  top: -10%;
  left: 0;
  right: 0;
  bottom: -10%;
  font-size: 0;
  white-space: nowrap;
}

.slider__image__item {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  transform: none;
  transition: transform 1s $easeInOutQuad;
}

.slider__texts {
  display: inline-block;
  vertical-align: top;
  height: auto;
  width: 42%;
  position: relative;
  z-index: 1;
  text-align: left;
  font-size: 0;
  white-space: nowrap;
  margin-left: -42%;
  left: 180px;
  @media screen and (max-width: $medium_breakpoint) {
    padding-top: 40%;
    margin-left: -80%;
    left: 0;
    width: 90%;
  }
}

.slider__texts__frame {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 90px 0 0 0;
  @media screen and (max-width: $medium_breakpoint) {
    padding: 65px 0 0 0;
  }
}

.slider__texts__main {
  width: 100%;
  background: $green;
}

.slider__texts__content {
  width: 100%;
  height: 100%;
  transform: none;
  transition: transform 0.8s $easeInOutQuad;
}

.slider__text__item {
  display: inline-block;
  vertical-align: top;
  font-size: $default_font_size;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.8s $easeInOutQuad;
}

.slider__text__item__content {
  width: 100%;
  height: auto;
  padding: em(30px) em(35px);
  white-space: normal;
  color: $white;
  h3 {
    color: $white;
  }
  &.email {
    padding-bottom: em(50px);
  }
}

.slider__text__item__title {
  font-size: em(18px);
  font-weight: 700;
  margin-bottom: em(5px);
  line-height: 1.3;
}

.slider__text__item__subline {
  font-size: em(14px);
  font-weight: 300;
  line-height: 1.3;
}

.slider__text__item__text {
  font-size: em(16px);
  font-weight: 300;
  margin-top: em(20px);
  margin-bottom: em(5px);
  line-height: 1.4;
}

.slider__text__item__qualifications__title {
  margin-top: em(20px);
  font-size: em(12px);
  text-transform: uppercase;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.07em;
}

.slider__text__item__qualifications {
  margin: em(10px) em(-15px) 0 0;
  li {
    display: inline-block;
    margin-right: em(8px);
    margin-bottom: em(8px);
    background: $white;
    padding: em(5px) em(8px);
    font-size: em(14px);
    font-weight: 700;
    color: darken($green, 10);
    line-height: 1.3;
  }
  .email & {
    margin-bottom: em(10px);
  }
}

.slider__text__item__email {
  display: block;
  text-decoration: none;
  width: 70px;
  height: 70px;
  background: $white;
  border-radius: 50%;
  position: absolute;
  bottom: -30px;
  left: 20%;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
  box-shadow: 0 0 30px rgba($black, 0.1);
  text-align: center;
  line-height: 69px;
  transform: translateX(-200%);
  pointer-events: none;
  opacity: 0;
  svg {
    display: inline-block;
    fill: $green;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-top: -2px;
  }
  &:hover {
    transform: scale(1.05) !important;
  }
}