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

/***************
  Base
****************/

html,
body,
#mainViewDiv, #appDiv, #popup {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

#appDiv {
  top: 0;
  pointer-events: none;
  position: absolute;
  overflow: hidden;
}

#mainViewDiv {
  position: absolute;
  bottom: 0;
  left: 0;
  @include transition(all 0.8s);
}

/***************
  Typography
****************/

#appDiv {
  color: $primaryColor;
  font-size: $generalFontSize;
  line-height: $generalFontSize + 7px;
  text-shadow: 1px 1px 5px rgba(70,70,70, 1);

  a {
    color: $primaryColor;
    text-decoration: underline;
  }

  h1, h2, h3, h4, h5 {
    // font-family: "HelveticaNeue-CondensedBlack", "Helvetica Neue";
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    font-stretch: "condensed";
    pointer-events: all;
    font-weight: 900;
    text-shadow: 0 0 5px rgba(70,70,70, 1);
    
    &.slash-title {
      text-transform: none;
      font-family: "Avenir Next";
      font-stretch: "normal";
      font-weight: normal;

      &::before {
        content: "/";
        margin-right: 10px;
      }
    }

    &.inline {
      margin-right: 10px;
    }
  }

  h2.slash-title {
    margin-bottom: 50px;
    margin-top: 30px;
  }

  h5.inline {
    font-family:'Roboto Condensed', sans-serif;
    font-size: 15px;
  }

  .inline {
    display: inline;
  }

  p {
    pointer-events: all;
  }

  h1 {
    // font-family: "HelveticaNeue-CondensedBlack", "Helvetica Neue";
    font-family:'Roboto Condensed', sans-serif;
    font-stretch: "condensed";
    font-weight: 900;
    font-size: $bigTitleFontSize;
    line-height: $bigTitleFontSize;
    margin-bottom: 30px;
  }
}

@media (max-width: 1400px) {
  #appDiv {
    font-size: 12px;
    line-height: 17px;

    .active .viewpoints {
      margin-top: 50px;

      h2.slash-title {
        margin-bottom: -5px;
      }

      .viewpoint {
        font-size: 21px;
      }
    }
    #surroundings h1 {
      font-size: 30px;
      margin-bottom: 10px;
    }
    
    #surroundings .slash-title.width-toggle {
      font-size: 20px;
    }

    #surroundings .content {
      font-size: 17px;
    }

    #surroundings .content {
      line-height: 30px;
    }

    #surroundings .content svg {
      width: 13px;
      vertical-align: -2px;
    }

    #surroundings .element a {
      margin-left: 8px;
    }

    #menu {
      font-size: 18px;

      .slash {
        margin-left: 20px;
        margin-right: 15px;
      }
    }

    .side-container {
      max-width: 290px;
    }

    h1 {
      font-size: 50px;
      line-height: 50px;
    }

    h2.slash-title {
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 25px;
    }

    .timetable {
      margin-top: 20px;

      .daytime {
        height: 20px;

        h2 {
          font-size: 20px;
          margin-top: -4px;
        }
        
        h3 {
          font-size: 15px;
          margin-bottom: 3px;
        }
      }
    }

    #surroundings .content {
      margin-top: 0px;
    }

    .active .floor-selector .level:first-child {
      margin-top: 0;
    }

    #floors {
      h1 {
        font-size: 40px;
        line-height: 40px;
        margin-left: 70px;
        width: 220px;

        &.number {
          font-size: 100px;
          margin-top: 20px;
          margin-left: 0;
        }
      }

      h3.subtitle {
        font-size: 25px;
        margin-left: 75px;
        letter-spacing: 4px;
      }

      .level {
        margin-top: 33px;
        margin-left: 12px;
      }
    }

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

/***************
  Layout
****************/

.side-container {
  top: 0;
  position: absolute;
  max-width: 390px;
  margin: 50px;
}
.side-container.left {
  left: 0;
}

.side-container.right {
  right: 0;
  margin-top: 20px;
  text-align: right;
}

#menu {
  pointer-events: all;
  text-align: center;
  position: absolute;
  left: 0;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: center;
  display: block;
  font-size: $menuItemFontSize;
  font-family: "Avenir Next";
  font-stretch: "normal";
  font-weight: medium;
  top: $menuTopPosition;
  cursor: pointer;

  .slash {
    margin-left: $menuSlashMarginLeft;
    margin-right: $menuSlashMarginRight;
  }

  a {
    text-decoration: none;
    color: $menuItemColor;
    cursor: pointer;
    @include transition(font-size 0.3s);

    &.active {
      font-size: $menuItemActiveFontSize;
      color: $menuItemActiveColor;

      &:hover {
        color: $menuItemActiveColor;
      }
    }

    &:hover {
      font-size: $menuItemOverFontSize;
      color: $menuItemOverColor;
    }
  }

}

.esri-attribution {
  display: none;
}