@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();
        }
      }
    }
    &[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;
  min-height: em(400px);
  padding: em(90px) 0 em(80px);
  text-align: right;
  vertical-align: top;
  @media screen and (max-width: $medium_breakpoint) {
    padding: em(300px) 0 0;
  }
}

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

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

.slider__images__frame {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: em(180px);
  bottom: 0;
  z-index: -1;
  @media screen and (max-width: $medium_breakpoint) {
    right: 10%;
    bottom: em(200px);
  }
}

.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;
  overflow: hidden;
  padding-bottom: em(40px);
  @media screen and (max-width: $medium_breakpoint) {
    width: 90%;
  }
}

.slider__texts__frame {
  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;
  &.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: em(70px);
  height: em(70px);
  background: $white;
  border-radius: 50%;
  position: absolute;
  bottom: em(-30px);
  left: 20%;
  transform: none;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s;
  box-shadow: 0 0 em(30px) rgba($black, 0);
  text-align: center;
  line-height: em(69px);
  svg {
    display: inline-block;
    fill: $green;
    width: em(30px);
    height: em(30px);
    vertical-align: middle;
    margin-top: -2px;
  }
  &:hover {
    transform: scale(1.1);
    box-shadow: 0 0 em(30px) rgba($black, 0.1);
  }
}