@import 'public-booking/main_dependencies';

$pagination-active-color: black;

bb-pagination {

  @include mobile-only {
    display: block;
    width: 100%;
  }

  ul {
    &.pagination {
      display: flex;
    }

    button.btn {
      // No radius between buttons.
      border-radius: 0;

      @include mobile-only {
        flex-grow: 1;
      }

      &:not(:last-of-type) {
        // Border has to be 1px wide between buttons. Eliminating right border of each button.
        border-right: 0; margin-left: -1px;
      }

      // Eliminate focus.
      &:focus, &:active, &:active:focus {
        box-shadow: none;
        outline: none;
      }

      &:hover, &:focus, &.btn-default.active, &:active, &:active:focus {
        background: $bb-button-default-background-color;

        border-color: darken($bb-panel-border-color, 10%);
        &+ button.btn {
          border-left-color: darken($bb-panel-border-color, 10%);
        }
      }

      &.btn-default.active {
        background: $bb-pagination-active-background-color;
        color: white;
      }
    }
  }
}