@import '/core/_stylesheets/bb_utils';

@import 'admin-booking/main_dependencies';
@import 'admin-dashboard/_stylesheets/accessibility';
@import '../calendar_base';

bb-time-ranges-view {
  @include bb-calendar-base;
  min-height: 231px;

  // When loader is spinning we will not see outline from top bar buttons.
  margin: -10px -10px 0 -10px;
  .bb-time-ranges-view__content {
    padding: 10px;
  }

  .message.message--danger {
    padding: 10px;
    padding-left: 20px;
    margin-bottom: 30px;
    border-width: 1px;
    border-style: solid;
    border-color: $brand-danger;
    color: $brand-danger;

    .message__text {
      width: 100%;
    }
  }

  .message.message--info {
    padding: 10px;
    padding-left: 20px;
    margin-bottom: 30px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(49, 113, 180);
    color: rgb(49, 113, 180);

    .message__text {
      width: 100%;
    }
  }

  .message.message--warning {
    padding: 10px;
    padding-left: 20px;
    margin-bottom: 30px;
    border-width: 1px;
    border-style: solid;
    border-color: $brand-warning;
    color: $brand-warning;

    .message__text {
      width: 100%;
    }
  }

  $navigation-column-width: 65px;
  $navigation-column-padding: 15px;

  .uib-datepicker-popup {
    padding: 0;
    z-index: 2000;
    margin-top: 44px !important;

    tr + tr {
      th {
        height: 21px;
        border: 2px solid darken($gray-lighter, 5%);
        border-bottom: 1px solid darken($gray-lighter, 5%);
      }
    }

    .btn {
      background-color: white !important;
      border-color: darken($gray-lighter, 5%) !important;
      box-shadow: none;

      border-radius: 0;
    }
    .btn.active, .btn:hover {
      background-color: $gray-lighter !important;
    }

    .btn.btn-info {
      background-color: hsl(hue($brand-primary), saturation($brand-primary), 95%) !important;
      color: #3171b4;
    }
  }

  [uib-datepicker], [uib-daypicker] {

    border: none !important;
    box-shadow: none !important;

    :focus {
      outline: 2px solid $input-border-focus !important;
    }
  }

  .time-ranges-view__jump-to-next-availability-alert {
    height: 33px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 10px;
  }

  .time-ranges-view__top-bar {
    &__buttons {
      div {
        display: inline;
      }

      span.input-group-btn {
        display: inline;
      }

      @media (max-width: $screen-sm-max) {
        margin-bottom: 20px;
      }
    }

    &__filters {
      display: flex;
      justify-content: flex-end;
      flex-basis: 50%;

      div {
        flex-basis: 50%;
      }

      div + div {
        margin-left: 10px;
      }
    }
  }

  .time-ranges-view__picker-button-wrapper {
    padding-right: 10px;
    border-right: 1px solid #d1d4dc;

    .input-group {
      width: 39px;
      button {
        height: 39px;
      }
      input {
        display: none;
      }
    }
  }

  .time-ranges-view__picker-button-wrapper {
    .input-group-btn:last-child > .btn {
      border-bottom-left-radius: $border-radius-base;
      border-top-left-radius: $border-radius-base;
    }
  }

  .time-ranges-view__navigation-buttons-wrapper {
    margin-left: 10px;

    button {
      &:first-of-type {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
      }

      border-right: none;

      &:focus, &:focus:active {
        border-right: none;
      }

      .fa-chevron-left, .fa-chevron-right {
        position: relative;
        top: 1px;
      }
    }

    button + button {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;

      border-right: 1px solid #d1d4dc;
      &:focus, &:focus:active {
        border-right: 1px solid rgb(173, 173, 173);
      }
    }

    button:hover + button {
      border-left: 1px solid rgb(173, 173, 173);
    }

    button:focus + button {
      border-left: 1px #66afe9 solid;;
    }
  }

  .time-ranges-view__navigation-label-wrapper {
    display: flex;
    margin-left: 10px;
    font-size: 16px;

    div {
      align-self: center;
    }
  }

  .time-ranges-view__multi-day-view {
    // Eliminate separator between header and the body.
    .panel-heading + .panel-collapse > .panel-body {
      border-top: none;
    }

    .calendar-table {
      width: 100%;
      margin-top: 20px;

      th {
        background-color: #fafbfb;
        height: 45px;

        .time-ranges-view__header-wrapper {
          display: flex;
          margin-left: 10px;

          h3 {
            margin: 0;
            font-size: 14px;
            align-self: center;
          }
        }
      }

      th, td {
        border: solid 1px #d2d6de;

        bb-time-range-accordion-group {
          &:focus {
            @include outline;
            &:after {
              outline: none;
            }
          }
          .time-range-accordion-group__accordion {
            position: relative;
          }

          .panel-collapse {
            position: absolute;
            width: 100%;
            z-index: 1000;
          }

          .time-slot:focus {
            @include outline-border;
          }
        }

        bb-time-range-accordion-group + bb-time-range-accordion-group {
          border-top: solid 1px #d2d6de;
        }

        &:focus {
          outline: none;
        }

        text-align: left;
        @media (max-width: $screen-xs-max) {
          @include divide(1);
        }

        @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
          @include divide(3);
        }

        @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
          @include divide(5);
        }

        @media (min-width: $screen-lg-min) {
          @include divide(7);
        }
      }

      // Layout will break without that style.
      td {
        vertical-align: top;
      }

    }

    // Collapsing accordion doesn't have ugly border on the sides.
    [uib-accordion-group] {
      border-right: none;
      border-left: none;
    }
  }

}