@import "../../../App/Variables";
@import "../../../Framework/Mixins";
@import "../../../Resources/Icons/ionicons"; // ionicons
@import "../../../Resources/Icons/ioniconsExtend"; // extendable ionicons
@import "../../../Resources/Icons/MaterialUI/fontFace";

.frame {
  @include main-wrapper;
}

.configuratorscreen {
  font-family: $font-family, $font-family-fallback;

  min-width: 320px;
  @include main-wrapper-inner;

  a {
    color: rgba(0,0,0,0.6);
    @include transition(all 0.3s);

    &:hover, &:active {
      color: rgba(0,0,0,0.8);
    }
  }

  * {
    @media screen {
      box-sizing: border-box;
    }
  }
}

.carousel-wrapper {
  .carousel-nav {
    transform: scale(1,1);
    &.prev {
      @extend %ion-ios-arrow-left;
    }
    &.next {
      @extend %ion-ios-arrow-right;
    }
  }
  &.vertical {
    .carousel-nav {
      transform: rotate(90deg);
    }
  }
}

.optionclassificationitem {
  &.checked {
    .optionclassificationitem-title:after {
      @extend %ion-checkmark:before;
      padding-left: 8px;
    }
  }
}

.optiondetail {
  .optiondetail-nav {
    transform: scale(1,1);
    &.prev:before {
      @extend %ion-ios-arrow-left;
      line-height: $nav-button-height;
    }
    &.next:before {
      @extend %ion-ios-arrow-right;
      line-height: $nav-button-height;
    }
  }
}

@keyframes starthere {
  0% {bottom: -5px;}
  50% {bottom: 5px;}
  100% {bottom: -5px;}
}

@keyframes starthere-left {
  0% {left: -5px;}
  50% {left: 5px;}
  100% {left: -5px;}
}

.starthere {
  &.horizontal {
    &:before {
      @extend %ion-android-arrow-back;
      position: relative;
      animation: starthere-left 1s ease-in-out 0s infinite;
    }
  }
  &.vertical {
    &:before {
      @extend %ion-android-arrow-down;
      position: relative;
      animation: starthere 1s ease-in-out 0s infinite;
    }
  }
}

.fastconfiguration-select-arrow {
  &:before {
    @extend %ion-ios-arrow-down;
  }
}

.primary-button {
  background-color: rgba(0,0,0,0.2);
  padding: 10px;
}

@media screen {
  .visualizationcomponentcontainer {
    position: absolute;
    top: 0;
    width: $visualization-container-width;
    height: $visualization-container-height;
    overflow: hidden;
  }

  .configuratorscreen {
    > .price {
      position: absolute;
      top: $elements-padding;
      right: $elements-padding;

      height: $price-height;
      font-size: $price-font-size;
    }

    > .itemtitle {
      position: absolute;
      top: $elements-padding;
      left: $elements-padding;
      z-index: 1;
    }

    > .tools {
      position: absolute;
      right: $elements-padding;
      top: $elements-padding + 75px;
      z-index: 1;
    }

    > .addtocart-button {
      position: absolute;
      right: $elements-padding;
      top: $elements-padding + 35px;
      z-index: 1;
    }
  }

  .error {
    padding: 10px 0;
    color: red;
  }

  // .dock-bottom is the default
  .dock-left {

    .itemtitle {
      left: $optionclassification-width-landscape + $elements-padding;
    }

    .visualizationcomponentcontainer {
      left: $visualization-container-left-landscape;
      width: $visualization-container-width-landscape;
      height: $visualization-container-height-landscape;
    }

    .optionlist-dialog {
      .dialog {
        left: $optionclassification-width-landscape;
      }
    }

  }
}


@media print {
  .configuratorscreen {
    padding: $print-padding 0;
    height: calc(100% - #{2*$print-padding});
  }
  .price {
    float: right;
    font-size: 20px;
    font-weight: bold;
    padding-top: 30px;
  }
  .itemtitle {
    padding-bottom: 20px;
  }
  .visualizationcomponentcontainer {
    max-height: 50%;
    overflow: hidden;
  }

  .optionclassificationitem {
    &.checked {
      .optionclassificationitem-title:after {
        display: none;
      }
    }
  }

  // hidden elements
  .addtocart-button,
  .tools,
  .starthere
  {
    display: none;
  }
}
