$fontSizeArrows: 40px;
.dzs-navigation--type-thumbsAndArrows {

  &.menu-moves-horizontally {

    align-items: center;

    .nav--thumbsAndArrows--arrow {
      display: block;
      position: relative;

      height: 100%;
      padding: 10px;

      &:before {
        top: 50%;
        transform: translate3d(0, -50%, 0);
      }
    }
  }

  &.menu-moves-vertically {

    .nav--thumbsAndArrows--arrow {
      width: 100%;
      height: 30px;
      text-align: center;

      &:before {

      }
    }
  }
}

.dzs-navigation--type-thumbsAndArrows {

  $arroww: 25px;
  $arrowh: 25px;


  .nav--thumbsAndArrows--arrow {

    &:before {

      content: "\2039";
      font-size: $fontSizeArrows;
      display: inline-block;
      position: relative;
      line-height: 20px;
    }

    cursor: pointer;


    $transition-property: opacity;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);


    &.arrow-is-inactive {
      opacity: 0.5;
    }
  }

  .thumbs-arrow-right {
    &:before {

      content: "\203A";
    }
  }
}