@import '../../global-sass-files/variables';

// Multi select
.input {
  &-select {
    width: 120px;
    border-top: 0;
    position: relative;
    &-input {
      -webkit-align-items: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      background-color: hsl(0,0%,100%);
      border-color: hsl(0,0%,80%);
      border-radius: 2px;
      border-style: solid;
      border-width: 1px;
      cursor: default;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      outline: 0 !important;
      position: relative;
      -webkit-transition: all 100ms;
      transition: all 100ms;
      box-sizing: border-box;
      width: 100%;
      padding-left: 7px;
      color: #242f3a;
      font-family: $primary-font-regular;
      padding: 2px 10px;
      height: 19px;
      line-height: 21px;
    }
    &-field {
      -webkit-align-items: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      background-color: hsl(0,0%,100%);
      border-color: hsl(0,0%,80%);
      border-radius: 2px;
      border-style: solid;
      border-width: 1px;
      cursor: default;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      height: 19px;
      outline: 0 !important;
      position: relative;
      -webkit-transition: all 100ms;
      transition: all 100ms;
      box-sizing: border-box;
      width: 100%;
      padding-left: 7px;
      color: #242f3a;
      font-size: 11px;
      font-family: $primary-font-regular;
      color: rgb(36,47,58);
    }
    &-dropdown {
      padding: 4px;
      max-height: 350px;
      box-sizing: border-box;
      border: 1px solid hsl(0,0%,80%);
      border-top: 0;
      display: none;
      left: 0;
      right: 0;
      background-color: #fff;
      z-index: 99;
      position: absolute;
      max-height: 350px;
      overflow-y: auto;
      width: 100%;
    }
    .form-group {
      margin-bottom: 7px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .custom-control {
      min-height: 0;
    }
    &.active {
      .input-select-dropdown {
        display: block;
      }
    }
    .scrollbar-container {
      position: static;
    }
    &.extrasmall{
      width: 58px;
    }
    &.small {
      width: 150px;
    }
    &.middle {
      width: 200px;
    }
    &.medium {
      width: 300px;
      @media screen and(max-width: 1300px) {
        width: 100%;
      }
    }
    &.large {
      width: 100%;
    }
    &.has-danger {
      .input-select-input {
        border: 1px solid #ad353b;
        color: #ad353b;
        &:hover, &:focus {
          border: 1px solid #ad353b;
          outline: #ad353b;
        }
        &:focus {
          box-shadow: 0 0 0 .4px #ad353b;
        }
      }
      .form-error {
        padding: 1px 0;
        box-sizing: border-box;
        color: $content-red-color;
        font-family: $primary-font-bold;
        font-size: 10px;
      }
      .input-select-wrap {
        &:after {
          background-color: #ad353b;
        }
      }
    }
    &-label {
      padding-left: 7px;
      text-align: left;
      font-size: 11px;
      font-family: $primary-font-regular;
      color: rgb(36,47,58);
      display: block;
      margin-bottom: 3px;
      cursor: pointer;
    }
    &.no-margin {
      margin: 0;
    }
  }
}

// Placeholder style
.input-select-input::placeholder {
  color: #dcdcdc;
  font-size: 11px;
}
.input-select-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #dcdcdc;
  font-size: 11px;
}
.input-select-input::-moz-placeholder { /* Firefox 19+ */
  color: #dcdcdc;
  font-size: 11px;
}
.input-select-input:-ms-input-placeholder { /* IE 10+ */
  color: #dcdcdc;
  font-size: 11px;
}
.input-select-input:-moz-placeholder { /* Firefox 18- */
  color: #dcdcdc;
  font-size: 11px;
}