.lite-detail {
  @include transparent();
  ion-content {
    display: flex;
    flex-direction: column;
    top: auto;
    @include desktop { top: $bar-height; }
    max-height: 35%;

    // TODO: leave the lite-form at the bottom or float on the map in mobile version
    .route-info {
      .route-status {
        padding-top: $padding-small-vertical;
        padding-bottom: $padding-small-vertical;
        color: $assertive;
        padding-left: 36px;
        font-size: $font-size-small;

        .icon {
          font-size: 18px;
          left: 0px;
        }
      }
    }

    .lite-stops {
      .lite-stop-container {
        display: flex;

        .selector {
          width: 2%;
          background-color: white;
          border-bottom: 1px solid #DDD;

          &.selected {
            background-color: $royal;
          }
        }

        .lite-route-info {
          width: 98%;
          border-left: 0px;
        }
      }
    }
  }


  .map-buttons {
    background-color: transparent;
    display: flex;
    justify-content: flex-end;

    button {
      background-color: white;
      color: $royal;
      width: 80px;
      height: 50px;
      margin: 0px;
      max-width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .icon-container {
        line-height: 0px;
        .icon-vertical {
          font-size: 18px;
          margin-bottom: $padding-small-vertical;

          &.solid {
            color: $energized;
          }
        }
      }

      span {
        font-size: $font-size-x-x-small;
        line-height: normal;
      }

      &.bookmark-button {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border-right: 1px solid $normal-grey;
      }

      &.more-info-button {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
      }
    }
  }
}
