$picker-notes-bg: #000;
$picker-header-bg: #fff;
$empty-day-background: white;
$picker-day-today: #000;
$non-pickable-day-background: white;
$non-pickable-day-color: #bbb;
$pickable-day-non-picked-background: white;
$pickable-day-picked-background: $royal;
$pickable-day-non-picked-color: #000;
$pickable-day-picked-color: #fff;

.multiple-date-picker {
  user-select: none;
  background-color: $picker-header-bg;
  width: 100%;

  .picker-days-row,
  .picker-days-week-row,
  .picker-top-row {
    width: 100%;
  }
  .picker-top-row {
    display: flex;

    .picker-month {
      flex: 1 1 auto;
    }
  }

  .picker-navigate {
    width: 16.66%;
    font-size: $font-size-base * 2;

    &:hover {
      cursor: pointer;
    }
    &.disabled,
    &.disabled:hover {
      color: #ddd;
      cursor: default;
    }
  }
  .picker-days-week-row {
    div {
      width: 14.28%;
      display: inline-block;
      padding-bottom: $padding-small-vertical;
      border-bottom: 1px solid #ddd;
    }
  }
  .picker-days-row {
    div {
      width: 14.28%;
      display: inline-block;
    }
  }
}

.picker-day,
.picker-top-row {
  padding: $padding-large-vertical 0;
}

.picker-day {
  background-color: $pickable-day-non-picked-background;
  border: 1px solid transparent;
  font-weight: bold;
  box-sizing: border-box;
  color: $pickable-day-non-picked-color;

  &.today {
    color: $picker-day-today;
    text-decoration: underline;
  }

  &.picker-off {
    background-color: $non-pickable-day-background;
    color: $non-pickable-day-color;
  }

  &.picker-selected {
    background-color: $pickable-day-picked-background;
    color: $pickable-day-picked-color;
  }
  &.picker-empty {
    background-color: $empty-day-background;
  }
}

//legend stuff
#pg_bookdate {

  .button {
    margin-top: $content-padding*2;
    margin-bottom: $content-padding*2;
  }
  .sold-out {
    background: repeating-linear-gradient( 135deg, $empty-day-background, $empty-day-background 3px, #ddd 3px, #ddd 6px );
    color: $non-pickable-day-color;
    border: 1px solid $empty-day-background;
  }
  .previously-booked {
    color: $assertive;
  }
  .legend-table {
    margin: 0 auto;
    td {
      padding: 2px;
      border: 0;
      text-align: center;
    }
    .exemplar {
      width: 2em;
    }
    .label {
      text-align: left;
      padding-right: $padding-base-horizontal;
      padding-left: $padding-small-horizontal;
      font-size: $font-size-small;
    }
  }

  // Legend
  .datepicker {
    background-color: $empty-day-background;
    padding-top: $padding-large-vertical;
    padding-bottom: $padding-large-vertical;
  }

  .booking-dates-selected {
    text-align: center;
    padding: $padding-large-vertical;

    button {
      margin-top: $padding-large-vertical;
    }

    .labelDiv {
      display: flex;
      align-items: center;
      justify-content:center;
      margin-bottom: $padding-large-vertical * 3;

      label {
        border: unset;

        &.item {
          padding-top: $padding-base-vertical;
          padding-bottom: $padding-base-vertical;
          padding-left: 50px; // for styling ionic checkbox
        }
      }
    }
  }
}

/* Style for the tap multiple days modal in booking dates*/

.tap-multiple-days {
  padding: $padding-large-vertical;

  img {
    width: 100%;
    height: auto;
  }
}
