// Styling for elements that exist across the app

////////////////////////////////////////////////////////////////////////////////
// Ionic style overrides
// Try to change using variables first before adding new styles here
////////////////////////////////////////////////////////////////////////////////
.item-divider {
  text-transform: uppercase;
  font-size: $font-size-small;
  font-weight: $font-weight-normal;
  min-height: 8px;

  &.no-text {
    padding: 0px;
  }
}

.scroll-content {
  background-color: $stable;
}

.item-input input:not([type]),
.item-input input[type="text"] {
  text-align: right;
}

.button-block {
  max-width: 80%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

//menu tab
.tab-title {
  text-transform: uppercase;
}

//routes page tab menu
.tab-title-large {
  font-size: $font-size-base;
}

.item p {
  font-size: $font-size-base;
}

////////////////////////////////////////////////////////////////////////////////
// New global styles
// Check to see if there's an applicable ionic style first before adding here
////////////////////////////////////////////////////////////////////////////////
// Setting a default point event style so we can make
// parents transparent without affecting all their children
* {
  pointer-events: auto;
}

.icon.pickup-stop {
  background: url('../img/icon_pickup.svg') center no-repeat transparent;
  &:before { content: " "; }
}

.icon.dropoff-stop {
  background: url('../img/icon_drop_off.svg') center no-repeat transparent;
  &:before { content: " "; }
}

span.placeholder {
  color: $hint-color;
}

// Remove Google logo and Map marker from Autocomplete dropdown
// Add some padding back to compensate for removed elements
.pac-logo::after { display: none !important; }
.pac-icon { display: none !important; }
.pac-item { padding: $item-padding !important; }

// Common big button which is the primary action for the view
.primary-button {
  @extend .button;
  @extend .button-block;
  @extend .button-energized;
  @include box-shadow($card-box-shadow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip ellipsis;

  padding: 20px 20px;
  font-size: 16px;
  line-height: 0px;
  background-color: $royal;
  border: 0px;
  border-radius: 6px;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
  color: $primary-button-font;
  z-index: 3;
  text-transform: uppercase;

  &:active {
    border-bottom: 1px solid $primary-button-shadow;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.6);
    color: $primary-button-font;
  }

  &[disabled="disabled"] {
    background-color: #d6d6d6;
    border-bottom: 4px solid #b9b9b9 !important;
    color: #6f6f6f;
  }

  &.button-item {
    margin-top: 0;
    margin-bottom: 0;
  }

  &.activated{
    border-color: $primary-button-shadow;
    color: $primary-button-font;
  }

  &.page-bottom {
    margin-bottom: 20px;
  }
}

// Hide the google maps boilerplate annotations
.gmnoprint,
.gm-style-cc,
.gm-style>div:last-child {
  display:none;
}

.card {
  margin: 0px;
  padding: 0px;

  .item {
    border: none;
    padding: 8px 30px;
  }

  .card-title {
    color: $royal;
    padding-top: 20px;
    padding-bottom: 10px;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: $font-weight-bold;
  }
}

.warning-text {
  text-align: center;
}

/* referenced by crowdstart, price calculator and selected dates  */

table.booking-info {
  width: 100%;
  th {
    font-weight: $font-weight-normal;
    background-color: $table-header-bg;
    color: $royal;
    padding: $table-cell-padding;
    border-bottom: solid $table-header-border-width $royal;
    text-align: center;
  }

  td {
    text-align: center;
    padding: $table-cell-padding;
    vertical-align: middle;
    &.total-sum{
      border-top: solid $table-header-border-width #DDD !important;
      padding-top: 20px;

      &.right{
        font-size: 30px;
      }

      &:not(.right) {
        font-size: 20px;
        text-transform: uppercase;
      }
    }
    &.right{
      text-align: right;
      padding-right: 0px;
    }

    &:not(.right) {
      padding-left: 0px;
    }
  }
}

// Font-size overrides
// -------------------------------

.item-note {
  font-size: $item-font-size;
}


// popup overrides
// -------------------------------

.popup-title {
  padding: $padding-large-vertical $padding-large-horizontal;
  font-size: $font-size-large;
  font-weight: $font-weight-normal;
  color: $royal;
}

.popup-sub-title {
  margin-bottom: 20px;
  padding: 0 $padding-small-horizontal;
  font-size: $font-size-base;
  line-height: $line-height-base;
}
.popup-body {
  overflow-y: scroll;
  overflow-x: hidden;
  input {
    margin: $padding-small-vertical 0;
  }
  .item {
    border: none;
    background-color: inherit;
  }
}

.popup-no-head {
  .popup-head {
    display: none;
  }
  .popup-body {
    padding: 15px;
    padding-bottom: 0;
  }
}

.button-bar {
  .button:last-child {
    border-radius: 0;
  }
  .button:first-child {
    border-radius: 0;
  }
}

// input overrides
// -------------------------------
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
  padding-left: 10px;
  line-height: $line-height-base;
}

/** FIXES FOR BUGS **/
/* Fix the wrong colour on Android subtabs */
.tabs-striped.tabs-royal .tabs.tabs-striped.tabs-light {
  background-color: $light;
}
/* Fix tabs in IE when screen > 1200px. This is actually the **correct**
  markup for the flexbox. max-width should not be used with flexbox
  because there is a flexbox-based alternative for that */
.tab-nav.tabs .tab-item {
  max-width: none;
  flex: 0 1 400px;
}

.item-subtitle {
  color: $hint-color;
  font-size: $font-size-large;
  padding-top:  $padding-large-vertical*2;
  padding-bottom: $padding-large-vertical*3;
}

textarea {
  border: 1px solid lighten($hint-color, 30%);
}

.small-button {
  margin-top: $padding-large-vertical;
  min-height: 40px;
  text-transform: uppercase;
  font-size: $font-size-base;
  line-height: inherit;
}

.button.button-disabled {
  background-color: $light-grey;
  color: #a2a2a2;
}

.text-link-div {
  text-align: center;
  margin: 1em;
  color: $royal;

  a {
    text-decoration: underline;
  }
}

.text-link-disabled {
  color: $hint-color;
  text-decoration: underline;
  pointer-events: none;
}

.bus-logo {
  min-height: 4em;
  height: 20vw;
  max-height: 10em;

  img {
    padding: 1px;
    max-width: 100%;
    max-height: 100%;
  }
}
.bus-co-info {
  padding-left: $content-padding;
}

.features {
  ul {
    list-style: disc;
    padding-left: $content-padding*2;
  }
}

// no tickets or no personal routes
.no-items.item {
  @include display-flex;
  @include flex-direction(column);
  @include justify-content(center);
  @include align-items(center);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  text-align: center;

  h2 {
    margin-top: 30px;
  }

  p {
    margin-top: 5px;
    max-width: 18em;
  }

  .primary-button {
    margin-top: 20px;
  }
}

.bar .title {
  text-transform: uppercase;
}

.float-right {
  float: right;
}

// Styles for inset modal
.modal {
  border-radius: 8px;

  $modal-inset-margin-horizontal: 2%;
  $modal-inset-margin-vertical: 3%;

  @media (max-width: 1023px) {
    width: (100% - (2 * $modal-inset-margin-horizontal));
    left: $modal-inset-margin-horizontal;
    height: (100% - (2 * $modal-inset-margin-vertical));
    min-height: (100% - (2 * $modal-inset-margin-vertical));
    top: $modal-inset-margin-vertical;
  }
}

// Make the touch target larger for text links/buttons
.text-link {
  padding-top: 20px;
  padding-bottom: 20px;
}