@import 'core/main_dependencies';

/* Common styling for all calendar directives and components. */
@mixin bb-calendar-base {
  // Angular components by default are not displayed.
  display: block;

  div.calendar-header {
    // Offset so calendar and its header will not overlap each other.
    margin-bottom: 10px;

    text-align: center;

    h1, h2, h3, h4, h5 {
      // Reset defaults.
      margin: 0;
      display: inline-block;

      font-size: $font-size-large;
      line-height: 33px;

      // Headers in calendar are focusable.
      &:focus {
        border: none;
        outline: 1px solid $input-border-focus;
        outline-offset: 4px;
        box-shadow: none;
      }
    }
  }

  .panel-group {
    // Get rid of default bootstrap style injected by accordion.
    margin-bottom: 0;
  }

  h4 {
    // Get rid of default bb style for headers.
    margin-bottom: 0;
  }

  button.time-slot {
    background-color: darken($gray-lighter, 10%);
    display: list-item;
    width: 100%;
  }

  // Styles for time slots. This should be a separate component though.
  .time-slot {

    padding: 15px 20px;
    text-align: center;

    &:hover, &.selected {
      background-color: $gray-darker;
      color: white;
    }

    // For the new time slot disabled method.
    &.disabled {
      opacity: 0.2;
    }

    // Focus style for time slots.
    border: 1px solid transparent;
    &:focus {
      outline: none;
      border: 1px solid $input-border-focus;
      box-shadow: inset 0 0 4px 1px $input-border-focus;
    }
  }

  // Enhancement of calendar arrow buttons while focused.
  .navigation, .calendar-header {
    button.btn {
      margin-top: -4px;
      padding: 5px 3px 3px;

      border-radius: 100px;
      border: 2px solid transparent;

      &:focus, &:active {
        border: 2px solid $input-border-focus;
        outline: 0 !important;
      }
    }
  }

}