@import "icons";

.uv {
  .headerPanel {
    color: @text-secondary-color;

    button.btn.imageBtn {
      padding-left: 2px;
      padding-right: 2px;

      &.first,
      &.prev,
      &.next,
      &.last {
        i {
          background-color: @gray;
          &:hover {
            background-color: @gray-dark;
          }
        }
      }

      &.disabled,
      &.disabled:hover,
      &.disabled i,
      &.disabled i:hover {
        background-color: transparent;
      }
    }

    .centerOptions {
      .image-selectionbox-options {
        float: left;
        margin: 0;
      }

      .image-selectionbox {
        height: 30px;
      }

      .prevOptions {
        float: left;
        margin: 0 15px 0 0;
      }

      .mode {
        float: left;
        margin: 12px 0 0;
      }

      .search {
        float: left;
        margin: 6px 0 0 5px;
        width: auto;

        .searchText {
          border: none;
          padding: 0 0 0 2px;
        }
      }

      .nextOptions {
        float: left;
        margin: 0 0 0 15px;
      }

      .mode {
        input {
          float: left;
        }

        label {
          clear: none;
          width: auto;
          margin: 0;
          padding: 0;
          float: left;
          font-size: @font-size-small;
          line-height: 18px;
          text-align: right;

          &.disabled {
            color: @disabled;
          }
        }
      }

      &.modeOptionsDisabled {
        width: 280px;
      }

      .autocompleteText {
        width: 30px;
        height: 19px;
        line-height: 19px;
        float: left;
        font-size: @font-size-small;
        padding-inline: 2px;
        padding-block: 0;
        margin-top: 6px;
        color: black;
        background-color: white;
        border: none;
      }

      .autocomplete {
        position: absolute;
        background: #fff;
        width: 60px;
        border: 2px solid @brand-primary-lighter;
        list-style-type: none;
        -webkit-margin-before: 0;
        -webkit-margin-after: 0;
        -webkit-margin-start: 0;
        -webkit-margin-end: 0;
        -webkit-padding-start: 0;
        margin: 0;
        padding: 0;
        max-height: 150px;
        overflow: hidden auto;
        z-index: 1000;

        .result {
          padding: 4px;
          width: 270px;
          overflow: hidden;

          &.loading {
            background-image: data-uri(@loader-white-bg);
            background-repeat: no-repeat;
            background-position: 4px 4px;
            height: 25px;
          }

          &.selected {
            background: @gray-lighter;
          }
        }
      }
    }

    .rightOptions {
      .pagingToggleButtons {
        float: left;
        .one-up {
          .opacity(1);
          &.on {
            .opacity(0.75);
          }
        }
        .two-up {
          .opacity(1);
          &.on {
            .opacity(0.75);
          }
        }
      }
      .gallery {
        .opacity(1);
        &.on {
          .opacity(0.75);
        }
      }
      .localeToggle {
        .link-color-decoration(#fff, none);
        font-size: @font-size-large;
        float: left;
        margin: 4px 8px;
        cursor: pointer;
      }
    }

    .searchText {
      width: 30px;
      height: 19px;
      line-height: 19px;
      float: left;
      font-size: @font-size-small;
      padding: 0;
      margin-top: 6px;
    }

    .total {
      float: left;
      display: block;
      height: 18px;
      line-height: 18px;
      margin: 6px 5px 0;
      width: 41px;
      font-size: @font-size-small;
      overflow: hidden;
    }
  }
}