$search-bar-radius: 6px;
$search-height: 42px;

#tabs ui-gmap-google-map {
  height: 100%;
}

suggestion-item {

  .day-badge {
    display: flex;
    flex-direction: row;

    div {
      background: $light-grey;
      color: $light;
      font-size: 12px;
      margin-right: 5px;
      width: 18px;
      height: 18px;
      text-align: center;
      border-radius: 2px;
      vertical-align: middle;
      line-height: 18px;
      font-weight: $font-weight-bold;
    }

    div.enabled {
      background: $royal;
    }
  }

  .suggestion-detail {
    .stops {
      display: block;
      position: relative;
      flex: 1 1 auto;
      margin-right: 60px;
  
      .stop-icon {
        /* this value depends on the width of the image -- leaving as a constant */
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        border-radius: 4px;
        margin-top: $font-size-base / 2;
        margin-right: $font-size-base / 2;
      }
  
      .start .stop-icon {
        background: #00C4A5;
        /*
          we want line to be:
              - the height of .start (=> height: 100%),
              - displace the left of the line to the middle of the circle
                  the image is 10x10 hence left: 4px (to account for width=2px)
              - .start is inline, so it's height = $line-height-computed.
                Image is centered vertically => top = $line-height-computed / 2
                N.B. overflow must be "visible" on .start for this to work
              - positioned relative to the stop icon => .start { position: relative }
        */
      }
      .end .stop-icon {
        background: #FF6C6A;
      }
  
      .start, .end {
        line-height: $line-height-base;
        position: relative;
        white-space: normal;
        display: flex;
  
        .road {
          text-transform: capitalize;
          flex: 1 1 auto;
          white-space: initial;
          font-weight: $route-item-font-weight-small;
          color: $normal-grey;
        }
      }
  
      .end {
        margin-top: 10px;
        margin-bottom: 10px;
      }
    }
    
    .suggestion-detail-info {
      display: flex;

      .right {
        text-align: right;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        text-transform: uppercase;
    
        .value {
          font-size: 34px;
          line-height: 34px;
          font-weight: $font-weight-bold;
        }
        .suggestions {
          color: $light-grey;
          font-size: $font-size-x-small;
          line-height: 15px;
        }
      }
    
      .left {
        flex: auto;
    
        .icon-and-schedule {
          margin-top: 0em;
          font-weight: $route-item-font-weight-small;
        }
      }
    }
  }
}

.your-suggestions {
  .create-suggestion-btn {
    padding: 25px 0;

    button {
      margin: auto;
    }
  }
}

.your-suggestion-detail {
  .header {
    font-size: 20px;
    padding-bottom: 16px;
    font-weight: $font-weight-medium;
    color: $royal;
    text-transform: uppercase;
    display: block;
  }
  
  .action-link {
    padding: 25px 0;
    
    div {
      text-align: center;
      text-decoration: underline;
      color: $royal;
    }

    div.delete {
      padding-top: 16px;
      color: $assertive;
    }
  }

  .loading-bar {
    span {
      text-align: center;
    }
    progress-bar .backer-high {
      transition: all 1.5s;
      width: 0%;
    }
  }
}

.create-new-suggestion {
  background-color: transparent !important;
  pointer-events: none !important;
}

.create-new-suggestion ion-content {
  display: flex;
  flex-direction: column;
  background-color: transparent!important;
  pointer-events: none;

  @include desktop {
    top: $bar-height;

    .padding-ticket-subheader {
      padding-top: 70px;
    }

    .padding-routepass-subheader {
      padding-top: 60px;
    }

    .create-view {
      background-color: $stable;
    }
  }

  .input-label {
    font-size: 15px;
  }

  .stops-selector {
    width: 90%;
    margin: auto;
    position: relative;
    border-radius: 6px;
    -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);

    label.item-select {
      border-radius: 6px;
    }

    select {
      padding-right: 40px;
      background: none;
      width: 100%;
      max-width: 100%;
    }
  }

  .stops-selector:nth-child(1) {
    top: 20px;
  }
  .stops-selector:nth-child(2) {
    top: 40px;
  }
  .stops-selector:nth-child(3) {
    top: 60px;
  }

  .week-checkbox {
    display: flex;
    background: $light;
  
    div {
      flex-basis: 100%;
    }
  
    ion-label {
      padding: 0;
      padding-top: 7px;
      width: 100%;
      text-align: center;
    }
  
    label {
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      border: none;
      align-items: center;
      border-radius: 6px;
  
      &.item-checkbox .checkbox {
        position: relative;
        margin: 0;
        top: auto;
        left: auto;
        right: auto;
        padding-top: 2px;
      }
    }
  }

  @keyframes slide-in-from-bottom {
    0% {
      transform: translateY(900px);
    }
    100% {
      transform: translateY(0);
    }
  }

  .submit-btn {
    position: absolute;
    bottom: 25px;
    width: 100%;
  }
}
