@import '_variable.scss';

.SumoSelect {
  width: 100%;
  display: inline-block;
  position: relative;
  outline: none;
  text-align: left;
    p {
      margin: 0;
      max-width: 100%;
    }
 
    ul > li {
      background-image: none;
      margin: 0;
      padding-left: 0;
    }

  /* Filtering style */
  .hidden {
    display: none;
  }

  .search-txt {
    display: none;
    outline: none;
  }

  .no-match {
    display: none;
    padding: 6px;
  }

  &.open {
    .search-txt {
      display: inline-block;
      position: absolute;
      top: -1px;
      left: 0;
      width: 100%;
      margin: 0;
      padding: 6px 8px 7px;
    }

    > .search > {
      span, label {
        visibility: hidden;
      }
    }
  }

   
  > {
    .CaptionCont {
      position: relative;
      border: 1px solid $grey-6;
      min-height: 14px;
      background-color: $ti-white;
      border-radius: .2em;
      margin: 0;
      > {
        span {
          display: block;
          padding-right: 30px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          cursor: default;
          /*placeholder style*/
          &.placeholder {
            color: $grey-5;
          }
        }
        label {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          width: 30px;
          > i {
            bottom: 0;
            display: block;
            height: 24px;
            left: 0;
            margin: auto;
            opacity: 0.8;
            position: absolute;
            right: 0;
            top: 0;
            width: 24px;
            cursor:hand; 
            cursor:pointer;
          }
        }
      }
    }

    .optWrapper {
      display: none;
      z-index: 1000;
      top: 30px;
      width: 100%;
      position: absolute;
      left: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background: $ti-white;
      border: 1px solid $grey-6;
      box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.11);
      border-radius: 3px;
      overflow: hidden;
    }

    .optWrapper > .options li.opt label, .CaptionCont {
      user-select: none;
      -o-user-select: none;
      -moz-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
    }
  }

  .select-all > label {
    user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
  }

  select:focus  + .CaptionCont,
  &:focus > .CaptionCont {
    animation: focus-shadow ease-in-out 2s infinite;
    -webkit-animation: focus-shadow ease-in-out 2s infinite;
    -moz-animation: focus-shadow ease-in-out 2s infinite;
    -o-animation: focus-shadow ease-in-out 2s infinite;
    -ms-animation: focus-shadow ease-in-out 2s infinite;
  }

  &.open {
    > .optWrapper {
      top: 28px;
      display: block;
      &.up {
        top: auto;
        bottom: 100%;
        margin-bottom: 5px;
      }
    }
  }



  > .optWrapper {
    ul {
      list-style: none;
      display: block;
      padding: 0;
      margin: 0;
      overflow: auto;
    }
    > .options {
      border-radius: 2px;
      position: relative;
      /*Set the height of pop up here (only for desktop mode)*/
      max-height: 250px;
      /*height*/
    }
    &.okCancelInMulti > .options {
      border-radius: 2px 2px 0 0;
    }
    &.selall {
      > .options {
        border-radius: 0 0 2px 2px;
      }
      &.okCancelInMulti > .options {
        border-radius: 0;
      }
    }
    > .options li {
      &.group.disabled > label {
        opacity: 0.5;
        cursor: not-allowed;
      }
      ul li.opt {
        padding-left: 22px;
      }
    }
    &.multiple > .options li ul li.opt {
      padding-left: 50px;
    }
    &.isFloating > .options {
      max-height: 100%;
      box-shadow: 0 0 100px $grey-3;
    }
    > .options {
      li.opt {
        padding: 8px 10px;
        position: relative;
      }
      > li.opt:first-child {
        border-radius: 2px 2px 0 0;
      }
    }
    &.selall > .options > li.opt:first-child {
      border-radius: 0;
    }
    > .options > li.opt:last-child {
      border-radius: 0 0 2px 2px;
      border-bottom: none;
    }
    &.okCancelInMulti > .options > li.opt:last-child {
      border-radius: 0;
    }
    > .options li.opt {
      &:hover {
        background-color: $ti-teal-6;
      }
      &.sel {
        background-color: $ti-teal-6;
      }
    }
  }
  .select-all {
    &.sel {
      background-color: $ti-teal-6;
    }
    > span {
      position: absolute;
      display: block;
      width: 30px;
      top: 0;
      bottom: 0;
      margin-left: -35px;
    }
    > span i {
      position: absolute;
      margin: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 14px;
      height: 14px;
      border: 1px solid $grey-6;
      border-radius: 2px;
      background-color: $ti-white;
    }
    &.selected > span i, &.partial > span i {
      background-color: $grey-2;
      box-shadow: none;
      border-color: transparent;
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABMSURBVAiZfc0xDkAAFIPhd2Kr1WRjcAExuIgzGUTIZ/AkImjSofnbNBAfHvzAHjOKNzhiQ42IDFXCDivaaxAJd0xYshT3QqBxqnxeHvhunpu23xnmAAAAAElFTkSuQmCC');
      background-repeat: no-repeat;
      background-position: center center;
    }
  }
  > .optWrapper {
    > .options li {
      label {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        cursor: pointer;
      }
      span {
        display: none;
      }
      &.group > label {
        cursor: default;
        padding: 8px 10px;
        font-weight: bold;
      }
    }
    /*Floating styles*/
    &.isFloating {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 90%;
      bottom: 0;
      margin: auto;
      max-height: 90%;
    }
    /*disabled state*/
    > .options li.opt.disabled {
      background-color: inherit;
      pointer-events: none;
      &.display-place-holder {
        display: none;
      }
      * {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        /* IE 5-7 */
        filter: alpha(opacity = 50);
        /* Netscape */
        -moz-opacity: 0.5;
        /* Safari 1.x */
        -khtml-opacity: 0.5;
        /* Good browsers */
        opacity: 0.5;
      }
    }
    &.multiple > .options li.opt {
      padding-left: 35px;
      cursor: pointer;
      span {
        position: absolute;
        display: block;
        width: 30px;
        top: 0;
        bottom: 0;
        margin-left: -35px;
      }
    }
  }
  > .optWrapper.multiple > .options li.opt span i {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 14px;
    height: 14px;
    border: 1px solid $grey-6;
    border-radius: 2px;
    background-color: $ti-white;
  }
  > .optWrapper {
    > .MultiControls {
      display: none;
      border-top: 1px solid $grey-7;
      background-color: $ti-white;
      border-radius: 0 0 3px 3px;
    }
    &.multiple {
      &.isFloating > .MultiControls {
        display: block;
        margin-top: 5px;
        position: absolute;
        bottom: 0;
        width: 100%;
      }
      &.okCancelInMulti > .MultiControls {
        display: block;
        height: 31px;
        > a {
          padding: 6px;
          border-radius: 0;
          display: inline-block;
          cursor: pointer;
          width: 50%;
          box-sizing: border-box;
          text-align: center;
          margin: 0;
          border-left: 0;

         &.btnOk {
            padding: 7px;
          }
         &.btnCancel {
            color: $grey-1;
          }
        }
      }
    }

    &.isFloating > .options li.opt {
      padding: 12px 6px;
    }

    &.multiple {
      &.isFloating {
        > .options li.opt {
          padding-left: 35px;
        }
        padding-bottom: 43px;
      }

      > .options li.opt.selected span i {
        background-color: $grey-2;
        box-shadow: none;
        border-color: $grey-2;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABMSURBVAiZfc0xDkAAFIPhd2Kr1WRjcAExuIgzGUTIZ/AkImjSofnbNBAfHvzAHjOKNzhiQ42IDFXCDivaaxAJd0xYshT3QqBxqnxeHvhunpu23xnmAAAAAElFTkSuQmCC');
        background-repeat: no-repeat;
        background-position: center center;
        transition: background-color 0.3s linear;
        transition: border-color 0.2s linear;
      }
    }
  }

  &.disabled {
    opacity: 0.7;
    cursor: not-allowed;
    span, i, svg {
      cursor: not-allowed;
    }
    > .CaptionCont {
      border-color: $grey-6;
      box-shadow: none;
      opacity: 0.5;
      background: $grey-7;
    }
  }

  .select-all {
    border-radius: 3px 3px 0 0;
    position: relative;
    border-bottom: 1px solid $grey-7;
    background-color: $ti-white;
    padding: 8px 0 3px 35px;
    height: 20px;
    cursor: pointer;
    box-sizing: unset;
    > {
      label, span i {
        cursor: pointer;
      }
    }
    &.partial > span i {
      background-color: $ti-white;
        border: 1px solid $grey-6;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTMzQzNCOEVBQjkwMTFFNzlBOTlGQ0U5M0ZGNzRGMkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTMzQzNCOEZBQjkwMTFFNzlBOTlGQ0U5M0ZGNzRGMkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFODBFMTcwOUFCOEYxMUU3OUE5OUZDRTkzRkY3NEYyRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFODBFMTcwQUFCOEYxMUU3OUE5OUZDRTkzRkY3NEYyRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnFQcKgAAABxSURBVHjaYvz//z8DNrB69eqFQCqOEZsCoOR8IBUKxFVMWCSXAqlYIJ4UGho6iVlbW/vPtWvXmID0AaDkJKBEPBBPBkqWgTQwAxkgU2qBilyAtB8QzwSKFcBMZF61atUBoCQ/kB0BxDVAyRpkKwECDADYIioR2KEgoAAAAABJRU5ErkJggg==');
        background-repeat: no-repeat;
        background-position: center center;
    }
  }
  > .optWrapper > .options li.optGroup {
    padding-left: 5px;
    text-decoration: underline;
  }

  .SelectBox {
    padding: 6px 8px 6px;
  }

  .sumoStopScroll {
    overflow: hidden;
  }

  /*this is applied on that hidden select. DO NOT USE display:none; or visiblity:hidden; and Do not override any of these properties. */

  .SelectClass, .SumoUnder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    border: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity = 0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    visibility: hidden;
  }

  .SelectClass {
    z-index: 1;
  }

}