//Multi Combo Input
smart-multi-combo-input {
  --smart-outline: var(--smart-primary);
  display: inline-block;
  width: var(--smart-text-box-default-width);
  height: var(--smart-text-box-default-height);
  overflow: visible;
  background: var(--smart-background);
  border: 1px solid var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);

  >option {
    display: none;
  }

  >.smart-container {
    display: flex;
  }

  &.smart-element {
    background: var(--smart-background);
  }

  input::selection {
    background: var(--smart-editor-selection);
    color: var(--smart-editor-selection-color);
  }

  input {
    &.smart-input {
      border: none;
      text-overflow: ellipsis;
    }
  }

  &:hover {
    border-color: var(--smart-ui-state-border-hover);
  }

  &[focus] {
    border-color: var(--smart-outline);
  }
}

.smart-multi-combo-input {
  height: var(--smart-editor-height);
  min-height: var(--smart-editor-height);

  &:not([input-tags-mode="one"]):not(.smart-grid-cell-editor) {
    height: auto !important;
  }

  .smart-container {
    width: 100%;
    height: 100%;
    color: inherit;
    font-family: inherit;
    position: relative;
    overflow: visible;
  }

  >.smart-container {
    min-height: var(--smart-editor-height);
  }

  .smart-drop-down-button {
    min-height: var(--smart-editor-height);

    .arrow {
      min-height: var(--smart-editor-height);
    }
  }
  
  .smart-tokens-container {
    grid-row-gap: 3px;
    padding: 3px;
  }
  
  .smart-token {
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    padding: 1px 6px 1px 6px;
    border-radius: 20px;
    background-color: var(--smart-primary);
    color: var(--smart-primary-color);
    margin: 0;
    height: 22px;

    .smart-drop-down-list-selection-label {
      text-overflow: ellipsis;
      overflow: hidden;

      &.dots {
        &::before {
          content:"\A";
          width:8px;
          height:8px;
          border-radius:50%;
          background: var(--smart-primary-color);
          display:inline-block;
          margin-right: 4px;
        }
      }
    }

    .smart-drop-down-list-selection-image {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      min-width: 20px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      margin-right: 4px;
      transform: scale(1.3);
      left: -3px;
      position: relative;

      &:hover {
        transform: scale(1.5);
      }
    }

    &:last-of-type {}
  }

  .smart-action-button {
    display: flex;
    outline: 1px solid transparent;
    height: 100%;
    width: 100%;
    flex-wrap: wrap;
    overflow: hidden;
    position: relative;
    user-select: none;
    border-top-left-radius: var(--smart-border-top-left-radius);
    border-bottom-left-radius: var(--smart-border-bottom-left-radius);
    min-height: var(--smart-editor-height);
    align-items: center;
  }

  .smart-drop-down-list-unselect-button {
    position: relative;
    margin-left: 2px;
    margin-right: -2px;

    &:after {
      content: var(--smart-icon-close);
      display: flex;
      justify-content: center;
      align-items: center;
      transform-origin: center;
      font-family: var(--smart-font-family-icon);
      background: #{'rgba(var(--smart-primary-rgb), 0.2)'};
      border-radius: 50%;
      width: 20px;
      height: 20px;
    }
  }

  &.smart-input {
    .smart-input {
      flex-grow: 1;
      align-self: center;
      width: var(--smart-editor-addon-width);
      min-width: var(--smart-editor-addon-width);
      min-height: 100%;
      max-height: 1rem;
      vertical-align: middle;
      margin: 0;
    }

    .smart-drop-down-button {
      height: initial;
    }
  }

  &[drop-down-button-position="left"],
  &[drop-down-button-position="right"] {
    .smart-action-button {
      width: calc(100% - var(--smart-editor-addon-width));
    }
  }

  &[input-tags-mode="one"] {
    .smart-action-button {
      align-items: center;
    }
  }

  &[readonly] {
    .smart-input {
      visibility: hidden;
    }

    .smart-action-button {
      background: var(--smart-surface);
      color: var(--smart-surface-color);
    }

    &[open] {
      .smart-action-button,
      .smart-drop-down-button {
        background: var(--smart-ui-state-hover) !important;
        color: var(--smart-ui-state-color-hover) !important;
      }
    }

    &:hover {
      .smart-action-button {
        background: var(--smart-ui-state-hover);
        color: var(--smart-ui-state-color-hover);
      }
    }
  }

  &[hide-input-tags-close-button] {
    .smart-drop-down-list-unselect-button {
      &:after {
        display: none;
      }
    }
  }

  &[right-to-left] {
    .smart-token {
      margin: var(--smart-editor-label-padding) var(--smart-editor-label-padding) 0 0;
      padding: 1px 6px 1px 2px;

      &:last-of-type {
        margin: var(--smart-editor-label-padding) var(--smart-editor-label-padding) var(--smart-editor-label-padding) 0;
      }
    }

    .smart-action-button {
      direction: rtl;
    }

    .smart-drop-down-list-unselect-button {
      margin: 0 5px 0 0;
    }
  }
}

.smart-multi-combo-input-drop-down-menu {
  .smart-scroll-viewer {
    width: inherit;
    height: inherit;
    padding: initial;
    min-height: inherit;
    border: initial;
  }

  .close-button:after {
    font-family: var(--smart-font-family-icon);
    content: var(--smart-icon-close);
    margin-left: 5px;
  }

  .add-new-item {
    display: grid;
    grid-template-columns: 1fr var(--smart-text-box-default-height);
    grid-column-gap: 5px;
    margin-left: 7px;
    margin-right: 7px;
    height: 36px;

    input {
      height: 30px;
    }

    smart-button {
      justify-content: center;
      align-content: center;
      height: 30px;
    }

    button {
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    button:after {
      font-family: var(--smart-font-family-icon);
      content: var(--smart-icon-plus);
    }
  }

  .smart-select-all {
    height: auto;
    border-bottom: var(--smart-border-width) solid var(--smart-border);
  }

  &[right-to-left] {
    >ul {
      direction: rtl;
    }
  }

  ul {
    li {
      a {
        display: flex;
        align-items: center;

        .smart-drop-down-list-selection-image {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 25px;
          height: 25px;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          margin-right: 4px;
          border-radius: 50%;
          border: 1px solid var(--smart-border);
        }
      }
    }
  }

  &[single-select] {
    ul li {
      height: 36px;
      margin-top: 1px;
      cursor: pointer;

      a {
        padding: 0px;
        padding-left: 6px;
        height: 100%;
      }

      &::after {
        display: none;
      }

      &:hover,
      &.selected {
        background: var(--smart-ui-state-hover);
        border-color: var(--smart-ui-state-hover);
        color: var(--smart-ui-state-color-hover);

        &:after {
          display: none;
        }
      }
    }
  }

  &[pills] {
    .smart-custom-item {
      white-space: nowrap !important;

      a { 
        white-space: nowrap !important;

        &::before {
          border-radius:50%;
          background: var(--smart-primary-color);
          margin-right: 4px;
          content: "+" !important;
          width: 12px !important;
          height: 12px !important;
          color: var(--smart-primary);
          margin-right: 4px;
          align-items: center;
          align-content: center;
          justify-content: center;
          justify-items: center;
          align-items: center;
          display: flex !important;
        }
      }
    }

    &[dots] {
      ul {
        li {
          a::before {
              content:"\A";
              width:8px;
              height:8px;
              border-radius:50%;
              background: var(--smart-primary-color);
              display:inline-block;
              margin-right: 4px;
          }
        }
      }
    }

    ul {
      li {
        height: 30px;
        margin-top: 1px;

        &:before {
          display: none;
        }

        &:after {
          display: none;
        }

        a {
          padding: 2px 10px;
          color: inherit;
          display: inline-flex;
          align-items: center;
          border-radius: 15px !important;
          margin-top: 5px;
          margin-left: 5px;
          height: auto;
          background: var(--smart-primary);
          border-color: var(--smart-primary);
          color: var(--smart-primary-color);
          white-space: nowrap;
          .smart-drop-down-list-selection-image {
            height: 20px;
            width: 20px;
          }
        }

        &.focused {
          a {
            background: var(--smart-primary) !important;
            border-color: var(--smart-primary) !important;
            color: var(--smart-primary-color) !important;
          }
        }

        &.focused,
        &:hover,
        &.selected {
          background: var(--smart-ui-state-hover);
          border-color: var(--smart-ui-state-hover);
          color: var(--smart-ui-state-color-hover);

          &:after {
            display: none;
          }
        }

        &.active {
          &.selected {
            &:before {
              display: none;
            }
          }
        }
      }
    }
  }
}