@import "mixins";
@import "variables";

.transit-show,
.transit-demo {
  background: $medium;
}

.canvas-wrapper,
.svg-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background: $white;
  canvas,
  svg {
    -webkit-backface-visibility: initial !important;
    -webkit-transform-origin: 50% 50%;
  }
}

.svg-wrapper.show {
  margin-left: 82px;
}

.svg-controls {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 10;
  a {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: $white;
    background: darken($tanLight, 15%);
    margin-bottom: 10px;
    font-size: 1.4em;   
    @include border-radius(4px); 
    @include box-shadow();   
    &:hover {
      text-decoration: none;
      background: darken($tanLight, 10%);
    }
    &.hide {
      display: none;
    }
  }
}

.transit-description {
  position: fixed;
  width: 200px;
  top: 20px;
  right: 20px;
  padding: 6px 12px;
  border: 1px solid #ccc;
  font-size: 12px;
  background: #eee;
  z-index: 20;
}
