@import "styles/base.scss";

.multi-select {
  font-family: Source Sans Pro,sans-serif;
}

.label-text {
  margin-bottom: 5px;
}


// Common Styles
.ng-select.onguard {

  .ng-select-container {
    cursor: pointer;
    display: flex;
    outline: 0;
    overflow: hidden;
    position: relative;
    width: 100%;

    &.ng-has-value .ng-value-container .ng-placeholder {
      display: none;
    }

    .ng-value-container {
      padding-left: 10px;
      min-height: 33px;
      font-size: 14px;
      font-weight: 400;
      border-radius: 4px;
      border: 2px solid #00aeef;
      background-color: #fff;

      

      .ng-input > input,
      .ng-placeholder {
        margin: 14px 0;
        top: -1px;
        cursor: pointer;
      }

      .ng-input {
        display: flex;
        align-items: center;
        
      }
    }
  }

  .ng-dropdown-panel {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid #e5eaee;
    border-top: none;
    margin-left: 5px;
    margin-right: 5px;
    width: calc(100% - 10px);

    .ng-dropdown-panel-items {
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }

    .ng-option-label {
      background: #fff;

      white-space: nowrap;
      overflow: hidden;
      cursor: pointer;
      display: block;
      padding: 5px 20px;
      font-size: 15px;
      font-weight: bold;
      line-height: 26px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: $blue;

      &:hover {
        color: $white;
        background-color: $blue;
      }

      &.inactive {
        color: #d8dfe6;
        &:hover {
          background: #d8dfe6;
          color: #fff;
        }
      }
    }
  }
}


// Primary Styles
.ng-select.onguard.primary {
  .ng-select-container {
    .ng-value-container {
      color: #00aeef;
      padding-left: 10px;
      min-height: 33px;
      font-size: 14px;
      font-weight: 400;
      border-radius: 4px;
      border: 2px solid #00aeef;
      
      background-color: #fff;
      cursor: pointer;

      

      .ng-input > input,
      .ng-placeholder {
        margin: 14px 0;
        top: -1px;
      }

      .ng-input {
        display: flex;
        align-items: center;
      }

      .ng-value {

        .ng-value-label {
          background-color: #00aeef;
          border: 1px solid #00aeef;
          color: $white;
          padding: 5px 22px;
          margin: 5px;
          margin-right: 15px;
          display: inline-block;
          position: relative;
          vertical-align: middle;
          flex-shrink: 0;
          font-size: 14px;
          border-radius: 4px;

          &.inactive {
            background-color: #d8dfe6;
            color: #f3f3f3;
          }
        }

        .ng-value-icon.left {
          position: relative;
          z-index: 100000;
          line-height: 22px;
          color: #fff;
          font-size: 20px;
          display: inline;
          vertical-align: middle;
          margin-right: -20px;

          &hover {
            color: $dark-blue;
          }
        }
      }
    }
  }

  .ng-clear-wrapper {
    color: #999;
    &:hover {
      color: #d0021b;
    }
  }


}

.ng-select.onguard.single {
  .ng-select-container {
    .ng-value-container {

      .ng-input > input {
        color: transparent;
      }

      .ng-input > input,
      .ng-placeholder {
        margin: 5px 0;
        top: 0px;
      }

      .ng-value {
        display: flex;
        align-items: center;

        .ng-value-label {
          background-color: transparent;
          border: none;
          color: #00aeef;
          padding: 0px;
          margin: 0px;
          margin-right: 0px;
          display: inline-block;
          position: relative;
          vertical-align: middle;
          flex-shrink: 0;
          font-size: 14px;
          line-height: 18px;
          border-radius: 4px;

          &.inactive {
            background-color: #d8dfe6;
            color: #f3f3f3;
          }
        }

        .ng-value-icon.left {
          display: none;
        }
      }
    }
  }
}


.ng-select.onguard.alternate {

  .ng-dropdown-panel {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    .ng-dropdown-panel-items {
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      .ng-option-label {
        text-transform: uppercase;
      }
    } 
  }

  .ng-select-container {
    .ng-value-container {
      color: #fff;
      height: 30px;
      border-radius: 5px;
      background-color: #00AEEF;

      &.ng-has-value .ng-value-container .ng-placeholder {
        display: none;
      }

      .ng-input > input,
      .ng-placeholder {
        text-transform: uppercase;
      }

      .ng-input {
        display: flex;
        align-items: center;
      }

      .ng-value {
         .ng-value-label {
           color: $white;
           text-transform: uppercase;
        }
      }
    }
  }
}