@require '{ohif:design}/app'

.pagination-area
    font-size: 13px
    font-weight: normal !important

    label
      font-weight: normal

    select
      theme('background-color', '$primaryBackgroundColor')
      color: white

  .rows-per-page label.wrapperLabel
    display: inline-table !important
    margin: 0 4px

    select
      width: 42px

  .page-buttons
    margin: 0
    text-align: right

    label
      font-weight: normal

      ul.pagination-control
        margin: 0

        li
          display: table-cell
          padding: 5px 2px

          a
            padding: 4px 8px
            theme('background-color', '$primaryBackgroundColor')
            theme('border-color', '$uiGray')
            theme('background-color', '$uiGrayDarkest')
            color: white
            text-decoration: none

            &:hover
              theme('color', '$activeColor')

          .active
            a
              theme('background-color', '$uiGray')
              border-color: #ddd
              color: white

        .disabled
          cursor: not-allowed

          a, a:hover, a:focus, a:active
            theme('background-color', '$uiGrayDarkest')
            theme('border-color', '$uiGray')
            theme('color', '$uiGrayLight')
            pointer-events: none

          &:not(.disabled):hover a
            theme('background-color', '$uiGrayDark')
            theme('color', '$activeColor')

          &.active a
            theme('background-color', '$uiGrayDark')
            theme('color', '$activeColor')