@import 'colors';
@import 'fonts';
@import 'mixins';

#play-track,
#play-time-trial {

  main {
    background-color: $sand;
    overflow: hidden;

    > svg {
      display: block;
    }
  }

  .appbar-center {
    .start-race {
      margin-top: 24px;
    }

    .timer {
      position: relative;
      display: inline-block;
      font-family: $mono;
      font-size: 21px;
      margin: 8px 0;
      padding: 0 12px;
      color: $whiteSmoke;
      background-color: darken($charcoal, 8%);
      border-radius: 2px;
      line-height: 36px;
      @include shadow-inset-light;
    }

    .exit-race {
      position: absolute;
      right: -32px;
      top: 4px;
      color: $mediumGrey;
    }
  }

  .toolbar {
    position: absolute;
    left: 16px;
    top: 16px;
    z-index: 2;
    transition: bezier(box-shadow);

    .toolbar-group, .toggle-context {
      float: left;
      margin-right: 12px;
      @include shadow-light;
      transition: bezier(box-shadow);

      i, span {
        line-height: 36px;
      }

      i {
        font-size: 20px;
      }

      span + i {
        margin-left: 6px;
      }
    }

    .toggle-context {
      display: flex;
      padding: 0 12px;
      cursor: pointer;
      background-color: $darkCharcoal;
      color: $mediumGrey;
      border-radius: 2px;
      font-family: $mono;
      transition: bezier(color), bezier(background-color);

      &:hover {
        background-color: $charcoal;
        color: $whiteSmoke;

        .separator {
          border-color: $darkGrey;
        }
      }

      .indicator {
        margin-left: 0;
        transform: rotate(180deg);
        transition: bezier(transform);
      }

      &.active {
        color: $orange;

        &:hover {
          color: $lightOrange;
        }

        .indicator {
          transform: rotate(0);
        }
      }

      .separator {
        border-right: 1px solid $charcoal;
        margin: 10px 12px;
        padding: 0;
        line-height: 16px;
      }

      .players-count {
      }

      .gates {
      }
    }

    .toolbar-group {
      display: flex;
      border-radius: 18px;
      background-color: #eee;
      color: $grey;

      &:hover {
        @include shadow-medium;
      }
    }

    .toolbar-item {
      padding: 0 8px;
      font-size: 15px;
      display: flex;
      transition: bezier(color);
      border: none;
      background-color: transparent;
      outline: none;

      border-right: 1px solid #ddd;

      &:last-child {
        border-right: none;
      }

      &:hover {
        color: $darkGrey;
      }
    }
  }

  aside.context {
    top: 16px + 36px + 12px;

    .aside-module {
      overflow-y: scroll;
    }

    .tabs-container {
      background-color: transparent;
    }

    .tab {
      background-color: #eee;
    }

    .tab:first-child {
      border-top-left-radius: 4px;
    }

    .tab:last-child {
      border-top-right-radius: 4px;
    }

    .draft {
      .actions {
        background-color: #eee;
        padding: 16px;
        text-align: center;
      }

      p {
        padding: 16px;
      }
    }

    .module-players {
      flex: 1;

      .race-legend {
        margin: 0;
        padding: 16px 16px 8px 16px;
        font-weight: bold;
        border-top: $border;
      }

      .list-players {
        margin: 8px 16px;
      }
    }


    // .module-help {

    //   dl {
    //     padding: 16px;
    //     @include clearfix;

    //     & > * {
    //       padding: 8px 0;
    //     }
    //   }

    //   dt {
    //     font-weight: bold;
    //     clear: both;
    //     float: left;
    //     color: $darkGrey;
    //     margin-right: 8px;
    //   }

    //   dd {
    //     text-align: right;
    //     border-bottom: 1px solid #eee;

    //     &:last-child {
    //       border-bottom-color: transparent;
    //     }
    //   }
    // }

  }

  .module-rankings {
    margin-top: 8px;

    .empty {
      font-size: 13px;
      margin: 16px;
    }

    .add-ghost, .remove-ghost {
      cursor: pointer;

      &:hover {
        background-color: $whiteSmoke;
      }
    }

    .add-ghost {
      &:hover {
        .rank {
          background-color: $green;
          color: $white;
        }
      }
    }

    .remove-ghost {
      background-color: $whiteSmoke;

      .rank {
        background-color: $lightGrey;
        color: $grey;
      }

      &:hover {
        .rank {
          background-color: $red;
          color: $white;
        }
      }

      .player-avatar {
        max-width: 138px;
      }
    }
  }

  .module-gate-ranking {
    .trial-status {
      margin: 0;
      padding: 16px 16px 8px 16px;
      font-weight: bold;
      border-top: $border;
    }

    li .rank {
      background-color: #eee;
    }

    li.current {
      background-color: $lightOrange;

      .rank {
        background-color: $orange;
        color: $darkOrange;
      }

      .handle {
        color: $darkerOrange;
      }

      .time {
        color: $darkOrange;
      }
    }
  }
}



.chat-layer {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  top: 52px + 16px;
  z-index: 5;

  .chat-input {
    position: absolute;
    bottom: 0;
    right: 0;
    @include sheet;
    display: flex;
    opacity: 0.7;
    border-radius: 18px;
    transition: bezier(all);

    &:hover {
      opacity: 1;
    }


    input {
      padding: 8px 0;
      font-size: 14px;
      border: none;
      cursor: pointer;
      transition: bezier(all);
      @include placeholder-color($white);
      text-align: left;
      background-color: transparent;
      color: $darkGrey;
      width: 1px;
      opacity: 0;
    }

    .chat-btn {
      position: relative;

      i {
        width: 36px;
        line-height: 36px;
        text-align: center;
        font-size: 20px;
        cursor: pointer;
      }

      .unread-count {
        background-color: $red;
        color: white;
        position: absolute;
        top: -8px;
        left: -8px;
        font-size: 13px;
        width: 18px;
        text-align: center;
        line-height: 18px;
        border-radius: 2px;
        transition: bezier(opacity);

        &.no-unread {
          opacity: 0;
        }
      }
    }
  }

  &.focus {
    .chat-input {
      @include shadow-medium;
      opacity: 1;
      border-radius: 2px;

      input {
        cursor: auto;
        outline: none;
        width: $aside - 36px;
        opacity: 1;
      }
    }
  }

  .chat-messages-toggle {
    float: right;

    i {
      font-size: 20px;
      color: $white;
      width: 36px;
      line-height: 36px;
      text-align: center;
      color: $lightGrey;
      cursor: pointer;

      &:hover {
        color: white;
      }
    }
  }

  .chat-messages {
    position: absolute;
    right: 0;
    bottom: 36px + 12px;
    opacity: 0;
    width: $aside;
    background-color: $shadow;
    font-size: 14px;
    max-height: 100%;
    overflow-y: auto;
    border-radius: 2px;
    transition: bezier(opacity);

    &.visible {
      opacity: 0.8;
    }

    &.empty {
      opacity: 0;
    }

    ul {
      @include players-list;
      padding: 4px 8px;
      margin: 0;
      color: $white;

      li {
        line-height: 16px;
        padding: 4px 0;

        .handle {
          color: white;
          margin-right: 8px;
          font-weight: bold;

          &:after {
            content: ":";
          }
        }

        .content {
          color: white;
        }
      }
    }
  }
}

.control-mode {
  margin: 16px;

  .modes {
    display: flex;
  }

  .mode {
    flex: 1;
    text-align: center;
    cursor: pointer;
    border-radius: 2px;
    padding: 16px 0;


    &:hover {
      background-color: $whiteSmoke;
      color: $darkGrey;
    }

    &.chosen {
      background-color: $whiteSeaBlue;
      color: $darkSeaBlue;
    }

    i {
      font-size: 48px;
      display: block;
      margin-bottom: 8px;
    }
  }

  .help {
    margin: 16px 8px;

    dl {
      @include clearfix;
      margin: 0;
    }

    dt, dd {
      line-height: 24px;
    }

    dt {
      float: left;
      clear: both;
      text-transform: uppercase;
      margin-bottom: 8px;
      background-color: $lightGrey;
      border-radius: 2px;
      padding: 0 8px;

    }

    dd {
      float: right;
    }

    dd:nth-child(4)::before {
      content: "new!";
      color: $orange;
      text-transform: uppercase;
      margin-right: 4px;
    }

  }
}

.touch-commands {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 16px;
  right: 16px;

  .touch-panel-center {
    position: absolute;
    background-color: transparent;
    left: 80px;
    right: 80px;
    top: 50%;
    height: 64px * 2 + 16px * 3;

    &:active {
      background-color: $light;
    }
  }

  .touch-panel-left, .touch-panel-right {
    position: absolute;
    top: 50%;
    display: flex;
    flex-direction: column;
    z-index: 2;

    a {
      display: block;
      text-align: center;
      @include shadow-medium;
      @include gradient-directional($lightGrey, $white, -30deg);
      border: 2px solid $whiteSmoke;
      width: 64px;
      height: 64px;
      position: relative;
      border-radius: 32px;
      background-color: $whiteSmoke;
      color: $darkGrey;
      user-select: none;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      margin-top: 16px;


      &:active {
        @include gradient-directional($lightGrey, $white, 150deg);
      }

      &.touch-left, &.touch-right {
      }

      &.touch-lock, &.touch-vmg {
        span {
          color: $grey;
        }
      }

      i {
        display: block;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        margin-top: 12px;
        font-size: 24px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 24px;
      }

      span {
        position: absolute;
        left: 0;
        right: 0;
        top: 34px;
        font-size: 12px;
      }
    }
  }

  .touch-panel-left {
    left: 0;
  }

  .touch-panel-right {
    right: 0;
  }
}

