$chosen-sprite: url('/admin/static/images/chosen-sprite.png') !default;
$chosen-sprite-retina: url('/admin/static/images/chosen-sprite@2x.png') !default;

.chosen-container {
   display: inline-block;
   font-size: $font-size-base;
   position: relative;
   vertical-align: middle;
   user-select: none;

   * {
      box-sizing: border-box;
   }

   .chosen-drop {
      position: absolute;
      top: calc(100% - 1px);
      z-index: 1010;
      width: 100%;
      border: $input-border-width solid $input-border-color;
      border-top: 0;
      background: $input-bg;
      box-shadow: $input-box-shadow;
      clip: rect(0, 0, 0, 0);
   }

   &.chosen-with-drop .chosen-drop {
      clip: auto;
   }

   a {
      cursor: pointer;
   }

   .search-choice,
   .chosen-single {
      .group-name {
         margin-right: 4px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         font-weight: normal;
         color: $input-color;

         &::after {
            content: ":";
            padding-left: 2px;
            vertical-align: top;
         }
      }
   }
}

.chosen-container-single {
   .chosen-single {
      position: relative;
      display: block;
      overflow: hidden;
      background-color: $input-bg;
      background-clip: padding-box;
      box-shadow: $input-box-shadow;
      text-decoration: none;
      white-space: nowrap;

      // jako input-sm
      font-size: $font-size-base;
      line-height: $line-height-base;
      padding: $padding-base-vertical $padding-base-horizontal*2 $padding-base-vertical $padding-base-horizontal;
      height: $input-height-base;
      border: $input-border-width solid $input-border-color;
      border-radius: $input-border-radius-base;
      color: $input-color;

      span {
         display: block;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
      }

      abbr {
         position: absolute;
         top: 9px;
         right: 26px;
         display: block;
         width: 12px;
         height: 12px;
         background: $chosen-sprite -42px 1px no-repeat;
         font-size: 1px;

         &:hover {
            background-position: -42px -10px;
         }
      }

      // sipka nahoru / dolu
      div {
         position: absolute;
         top: 0;
         right: 0;
         display: block;
         width: 24px;
         height: 100%;

         b {
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;
            color: $black;

            &::before {
               @include bootstrapicon;

               content: "\F282";
               font-size: $bootstrap-icon-size-base;
            }
         }
      }
   }

   .chosen-default {
      color: $input-color;
   }

   .chosen-single-with-deselect span {
      margin-right: 38px;
   }

   &.chosen-disabled .chosen-single abbr:hover {
      background-position: -42px -10px;
   }

   .chosen-search {
      position: relative;
      z-index: 1010;
      margin: 0;
      padding: 3px 4px;
      white-space: nowrap;

      input[type="text"] {
         margin: 1px 0;
         padding: 2px 20px 2px 5px;
         width: 100%;
         height: auto;
         outline: 0;
         border: $input-border-width solid $input-border-color;
         background: $chosen-sprite no-repeat 100% -20px;
         line-height: normal;
         border-radius: $input-border-radius-base;
         font-size: $font-size-small;
      }
   }

   .chosen-drop {
      margin-top: -1px;
      border-radius: 0 0 3px 3px;
      background-clip: padding-box;
   }

   &.chosen-container-single-nosearch .chosen-search {
      position: absolute;
      clip: rect(0, 0, 0, 0);
   }
}

.chosen-container .chosen-results {
   color: $input-color;
   position: relative;
   overflow-x: hidden;
   overflow-y: auto;
   margin: 0;
   padding: 0;
   max-height: 240px;
   -webkit-overflow-scrolling: touch;

   li {
      display: none;
      margin: 0;
      padding: 5px 6px !important;
      list-style: none;
      line-height: 20px;
      word-wrap: break-word;
      -webkit-touch-callout: none;

      &.active-result {
         display: list-item;
         cursor: pointer;
      }

      &.disabled-result {
         display: list-item;
         color: $text-muted;
         cursor: default;
      }

      &.highlighted {
         color: white;
         background: $primary;

         em { background: transparent; }
      }

      &.no-results {
         background: $gray-background;
         display: list-item;
      }

      &.group-result {
         display: list-item;
         font-weight: bold;
         color: $input-color;
         cursor: default;
      }

      &.group-option {
         padding-left: 15px;
      }

      // cast vyhledana ve vysledcich
      em {
         font-style: normal;
         background: #feffde;
      }
   }
}

.chosen-container-multi {

   .chosen-choices {
      position: relative;
      overflow: hidden;
      margin: 0;
      padding: 2px 5px 2px 0;
      width: 100%;
      height: auto;
      border: $input-border-width solid $input-border-color;
      background-color: $input-bg;
      border-radius: 3px;
      cursor: text;
      box-shadow: $input-box-shadow;
   }

   .chosen-choices li {
      float: left;
      list-style: none;

      &.search-field {
         width: 100%;
         margin: 0;
         padding: 0;
         white-space: nowrap;

         input[type="text"] {
            padding: $padding-base-vertical $padding-base-horizontal;
            height: 28px;
            outline: 0;
            border: 0 !important;
            background: transparent !important;
            box-shadow: none;
            color: $input-color;
            font-size: 100%;
            font-family: inherit;
            line-height: normal;
            border-radius: 0;
            width: 25px;

            @include placeholder;
         }

         .chosen-search-input {
            width: 100% !important;
         }
      }

      &.search-choice {
         position: relative;
         margin: 3px 0 3px 5px;
         padding: 3px 20px 3px 5px;
         max-width: 100%;
         border-radius: $input-border-radius-base;
         background-size: 100% 19px;
         background-repeat: repeat-x;
         background-clip: padding-box;
         color: $input-color;
         line-height: 13px;
         cursor: default;
         border: $input-border-width solid $input-border-color;
         background-color: $gray-background;

         span {
            word-wrap: break-word;
         }

         .search-choice-close {
            position: absolute;
            top: 4px;
            right: 3px;
            display: block;
            width: 12px;
            height: 12px;
            background: $chosen-sprite -42px 1px no-repeat;
            font-size: 1px;

            &:hover {
               background-position: -42px -10px;
            }
         }
      }

      &.search-choice-disabled {
         padding-right: 5px;
         border: 1px solid #ccc;
         background-color: #e4e4e4;
         color: #666;
      }

      &.search-choice-focus {
         background: $gray-background;

         .search-choice-close {
            background-position: -42px -10px;
         }
      }
   }

   .chosen-results {
      margin: 0;
      padding: 0;
   }

   .chosen-drop .result-selected {
      display: list-item;
      color: #ccc;
      cursor: default;
   }
}

.chosen-container-active {
   @include form-chosen-focus;

   &.chosen-with-drop {
      .chosen-drop {
         border: $input-border-width solid $input-border-focus;
         border-top-color: $border-color-light;
      }

      .chosen-single {
         @include border-bottom-radius(0);

         div {
            b {
               transform: rotateX(180deg);
            }
         }
      }

      .chosen-choices {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
      }
   }
}

.chosen-disabled {
   opacity: .5 !important;
   cursor: default;

   .chosen-single {
      cursor: default;
   }

   .chosen-choices .search-choice .search-choice-close {
      cursor: default;
   }
}

/* Retina compatibility */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
   .chosen-rtl .chosen-search input[type="text"],
   .chosen-container-single .chosen-single abbr,
   .chosen-container-single .chosen-search input[type="text"],
   .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
   .chosen-container .chosen-results-scroll-down span,
   .chosen-container .chosen-results-scroll-up span {
      background-image: $chosen-sprite-retina !important;
      background-size: 52px 37px !important;
      background-repeat: no-repeat !important;
   }
}
