/* Theme the controls */

.controls {
  background: #f7f7f7;
  border-top: 1px solid #fff;
  line-height: 16px;

  & .recline-query-editor {
    display: none;
  }

  & .recline-pager .pagination {
    margin: 10px 0;
    white-space: nowrap;

    & .page-range {
      border: none !important;
    }

    & ul {
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;

      & > li {
        &.action-pagination-update > a {
          font-size: 30px;
          color: var(--primary, #228900);
        }

        & > a,
        & > span {
          background-color: transparent;
          border: none;
          padding-left: 5px;
          padding-right: 5px;
          padding-top: 0;
          line-height: 1em;
          height: auto;

          &:hover {
            color: #343434 !important;
          }
        }
      }
    }
  }

  & .expand {
    padding-left: 5% !important;
  }
}

.list-view .controls,
.recline-data-explorer .controls {
  display: flex;
  flex-direction: row;

  & > * {
    align-self: center;
    padding-left: 5px;
    padding-right: 5px;
  }

  justify-content: space-around;

  &:not(.flex-reverse) > *:first-child {
    flex-grow: 1;
  }

  &.flex-reverse > *:last-child {
    flex-grow: 1;
  }

  padding: 0 10%;

  & .recline-pager {
    float: none;
  }

  & .pagination {
    width: 100%;
  }
}

ul.pagination {
  display: flex;
  flex-wrap: nowrap;
}
