ng-select {
  &.custom {
    &.ng-select-disabled {
      .ng-select-container {
        border-color: var(--gray500) !important;
        border-width: $border1 !important;
        background-color: var(--gray100), var(--gray500) !important;
        cursor: not-allowed !important;
      }
    }

    &.ng-invalid.ng-touched {
      .ng-select-container {
        border-color: var(--errorColorMain) !important;
        background-image: var(--xCircleMarkError);
        background-repeat: no-repeat;
        background-position: left calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
        border-width: $border1e5 !important;
      }
    }

    &.ng-select-opened {
      border-color: var(--primaryColorMain) !important;
      border-width: $border1e5 !important;
    }

    &.h-sm {
      .ng-select-container {
        height: $h-sm !important;
        min-height: $h-sm;
        padding: $spacing16 !important;
      }
    }
    &.h-md {
      .ng-select-container{
        height: $h-md !important;
        min-height: $h-md;
        padding: $spacing12 $spacing16 !important;
      }
      
    }
    &.h-lg {
      .ng-select-container {
        height: $h-lg !important;
        min-height: $h-lg;
        padding: $spacing8 $spacing16 !important;  
      }
    }

    .ng-select-container {
      border-color: #d9d9d9 !important;
      padding: $spacing16 !important;
      border-radius: $borderRadius8 !important;
      background-color: var(--elevate0) !important;
      min-height: $h-lg;
      max-height: 144px !important;
      overflow-y: hidden !important;
      box-shadow: none !important;

      input {
        padding: 0 !important;
      }

      &.ng-has-value {
        .ng-value {
          height: 32px !important;
          border-radius: 50px !important;
          padding: 5px 6px 5px 12px !important;
          font-size: $fontSize14 !important;
          background-color: var(--primaryColorMain) !important;
          border-color: var(--primaryColorMain) !important;

          span {
            color: var(--gray00) !important;
          }

          .ng-value-icon {
            float: right !important;
            border-radius: $borderRadius100 !important;
            background-color: var(--gray00) !important;
            color: var(--primaryColorMain) !important;
          }
        }
      }

      .ng-value-container {
        .ng-placeholder {
          position: relative !important;
          top: 0px !important;
          font-size: $fontSize16 !important;
          font-family: 'Inter';
          padding-left: $spacing12 !important;
          color: var(--gray600) !important;
        }
      }

      &:hover,
      &:focus {
        border-color: var(--primaryColorMain) !important;
        border-width: $border1e5 !important;
      }
    }

    ng-dropdown-panel {
      border-color: #d9d9d9 !important;
      padding: $spacing16 $spacing8 $spacing16 $spacing8 !important;
      border-radius: $spacing8 !important;
      margin-top: $spacing8 !important;
      background-color: var(--elevate0) !important;

      .scroll-host {
        max-height: 224px !important;
      }

      .ng-option {
        color: var(--bodyColor) !important;
        font-size: $fontSize14 !important;
        line-height: $lineHeight32 !important;
        display: flex !important;
        align-items: center !important;
        background-color: var(--elevate0) !important;
        &.ng-option-disabled {
          cursor: not-allowed !important;
        }
        &.ng-option-marked {
          background-color: var(--primaryColorExtraLight) !important;
        }
        .item {
          width: 100% !important;
          cursor: pointer;
          &.ng-option-disabled {
            cursor: not-allowed !important;
          }
          label {
            cursor: pointer;
          }
        }
      }
    }

    .is-multiple {
      .ng-select-container {
        overflow: auto !important;
      }
    }
  }
}

.ng-select .ng-select-container .ng-value-container {
  align-items: center;
  padding-left: 0px !important;
}