@import "../../../css/variables.scss";
@import "../../../css/mixins.scss";

/***************
  Slide animation
****************/

.side-container .pane {
  @include transition(all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.6s cubic-bezier(0.42,0,0.58,1));
  position: absolute;
  opacity: 0;
  top: 0;
}

.side-container.left .pane {
  left: -1000px;
  width: 390px;
}

.side-container.right .pane {
  right: -1000px;
  width: 190px;
}

.side-container.right .pane.active {
  right: 0;
  opacity: 1;
}

.side-container.left .pane.active {
  left: 0;
  opacity: 1;
}

.side-container.left .pane h1 {
  @include transition(margin 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55));
  margin-left: -200px;
}

.side-container.left .pane.active h1 {
  margin-left: 0;
}

.side-container.left .pane h2 {
  @include transition(margin 0.8s ease);
  margin-left: -200px;
}

.side-container.left .pane h2:nth-child(2) {
  @include transition(margin 0.8s ease 0.3s);
}

.side-container.left .pane h2:nth-child(3) {
  @include transition(margin 0.8s ease 0.6s);
}

.side-container.left .pane.active h2 {
  margin-left: 0;
}

/***************
  Surroundings
****************/

#surroundings {
  .element {
    width: 100%;
    @include transition(margin 0.3s ease);
    margin-left: -200px;

    a {
      color: $primaryColor;
      vertical-align: -2px;
      margin-left: 20px;
      text-decoration: none;
    }

    &.active {
      a {
        color: $orange;
      }
    }
  }

  .slash-title.width-toggle {
    width: 100%;

    &::before {
      display: none;
    }
  }

  // .toggle {
  //   border-color: $primaryColor;

  //   .knob {
  //     background-color: $primaryColor;
  //   }
  // }
}

.active #surroundings {
  .element {
    margin-left: 0;
  }

  .element:nth-child(1) {
      @include transition-delay(0.2s);
  }

  .element:nth-child(2) {
      @include transition-delay(0.3s);
  }

  .element:nth-child(3) {
      @include transition-delay(0.4s);
  }
}

/***************
  Floors
****************/

#floors {
  pointer-events: all;
  h1 {
    margin-left: 120px;
    // width: 
    pointer-events: all;
    width: 600px;
  }

  h1.number {
    margin-left: 0;
    margin-top: 25px;
    color: $orange;
  }

  .level, .number {
    position: absolute;
  }

  .level {
    margin-top: 61px;
    z-index: 2;
    margin-left: 28px;
    opacity: 0.8;
  }

  .number {
    font-size: 200px;
    z-index: 1;
  }

  h3.subtitle {
    font-family: "Avenir Next";
    font-weight: normal;
    font-style: italic;
    font-size: 40px;
    letter-spacing: 8px;
    opacity: 0.3;
    margin-top: -30px;
    margin-left: 125px;
    pointer-events: all;
  }

  .italic {
    font-style: italic;
    opacity: 0.5;
  }

  .content {
    margin-top: 50px;
  }

  .play_button {
    $play_button_background: scale-color($primaryColor, $lightness: -70%);
    position: relative;
    background: $play_button_background;
    border: none;
    outline: none;
    padding: 6px;
    border-radius: 13px;
    cursor: pointer;
    margin-left: 5px;
    vertical-align: -2px;
    border: 1px solid $primaryColor;

    .play_button__icon {
        $size: 12px;
        height: $size;
        width: $size;
        line-height: $size;
        position: relative;
        left: 1px;
        z-index: 0;
        box-sizing: border-box;
        display: inline-block;
        overflow: hidden;

        &:before, &:after {
            content: '';
            position: absolute;
            transition: 0.3s;
            background: #FFF;
            height: 100%;
            width: 50%;
            top: 0;
        }

        &:before {
            left: 0;
        }

        &:after {
            right: 0;
        }
    }

    .play_button__mask {
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: block;

        &:before, &:after {
            content: '';
            position: absolute;
            left: 0;
            height: 100%;
            width: 150%;
            background:  $play_button_background;
            transition: all 0.3s ease-out;
        }

        &:before {
            top: -100%;
            transform-origin: 0% 100%;
            transform: rotate(26.5deg);
        }

        &:after {
            transform-origin: 0% 0%;
            transform: rotate(-26.5deg);
            top: 100%;
        }
    }

    &.playing {
      .play_button__icon {
          left: 0;

          &:before {
              transform: translateX(-25%);
          }

          &:after {
              transform: translateX(25%);
          }
      }

      .play_button__mask {
          &:before, &:after {
              transform: rotate(0);
          }
      }
    }
}
}

#floorLegend {
  position: absolute;
  bottom: 30px;
  left: 15px;

  &.hide {
    display: none;
  }

  div {
    background: transparent;
    color: #fff;
    font-size: 15px;
    line-height: 22px;
  }

  .esri-legend__layer-caption, .esri-widget__heading {
    display: none;
  }

  .esri-legend__layer-row {
    height: 28px;
    display: block;
  }

  svg {
    transform: scale(0.7);
  }
}

#surroundings {
  .active .content {
    display: block;

    a {
      color: #fff;
    }

    & > div {
      a {
        @include transition(all 0.8s);
      }
      svg {
        @include transition(all 0.8s);
      }
    }

    & > div:hover {
      a {
        color: #fff;
      }

      svg {
        opacity: 1;
      }
    }
  }

  .content {
    pointer-events: all;
    margin-top: -30px;
    font-size: 25px;
    line-height: 40px;
    margin-left: 25px;
    display: none;
    
    

    svg {
      width: 15px;
      opacity: 0.5;
    }
  }
}