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

.multi-select {
  &-holder {
    padding: 8px 24px 24px;
    margin: -8px -24px -24px;
    position: relative;
    width: 100%;
    &-empty {
      .multi-select-holder-inner {
        border: 2px dashed #c2c3c6;
        text-align: center;
        margin: 0;
        padding: 5px 24px;
      }
      &:hover {
        .multi-select-holder-inner {
          border: 2px dashed #1576cb;
        }
        .multi-select-holder-add {
          color: #1576cb;
          font-family: $primary-font-bold;
        }
      }
    }
    &-label {
      font-family: $primary-font-regular;
      color: #797979;
      font-size: 13px;
      line-height: 14px;
      margin-bottom: 10px;
      display: block;
    }
    &-add {
      font-family: $primary-font-regular;
      color: #c2c3c6;
      font-size: 12px;
      line-height: 14px;
    }
    svg {
      position: absolute;
      top: 5px;
      right: 5px;
    }
    &:hover {
      background-color: #c2c3c6;
      cursor: pointer;
    }
    &.has-danger {
      .multi-select-holder-inner {
        border: 2px dashed #e22954;
        padding: 5px 24px;
      }
      &:hover {
        .multi-select-holder-inner {
          background-color: transparent;
        }
      }
      .multi-select-holder-add {
        color: #e22954;
        font-family: $primary-font-bold;
      }
    }
    .form-error {
      color: #e22954;
      font-family: $primary-font-bold;
      font-size: 10px;
      line-height: 14px;
      padding-left: 20px;
    }
    &-selected {
      background: #c2c3c6;
    }
  }
}