@import "../../styles/variables.scss";
@import "../common/typography/text.mixins";

$novo-chip-list-margin: 8px;
$novo-chip-input-width: 100px;
$novo-chip-input-margin: 4px;

.novo-chip-list {
  overflow: hidden;
}

.novo-chip-list-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: $novo-chip-list-margin;
}

.novo-chip-list-stacked {
  flex: 1;
  .novo-chip-list-wrapper {
    flex-direction: column;
    align-items: flex-start;

    .novo-chip {
      width: 100%;
      height: 2.8rem;
      .novo-chip-remove,
      .novo-chip-trailing-icon {
        margin-left: auto;
      }
    }
    input.novo-chip-input {
      flex: 1 0 auto;
    }
  }
}

novo-field.novo-focused {
  input.novo-chip-input {
    flex: 1 0 $novo-chip-input-width;
  }
}

input.novo-chip-input {
  width: 20px;
  margin: 0 $novo-chip-input-margin;
  flex: 1 0 20px;
  line-height: 1.5;
}