@import 'admin-booking/main_dependencies';

[bb-accessible-calendar-grid] {

  .no-focus {
    outline: none;
    box-shadow: none;
  }

  @extend .no-focus;
  > [tabindex="-1"]:focus {

    bb-time-range-accordion-group {
      @extend .no-focus;
    }
  }

  bb-time-range-accordion-group {
    // Overriding default accordion outline focus.
    &:focus {
      outline: 0;

      // Nasty outline hack. Thanks to that method outline isn't covered by a child element.
      position: relative;
      &:after {
        width: 100%;
        height: 100%;
        content: '';
        outline: 3px solid $input-border-focus;
        outline-offset: -3px;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
}