@import './../../styles/_base';

$color-border: $color-border;
$color-background: $color-white;
$color-tag-close: $color-grey;
$color-add-button: $color-grey;
$color-add-button-background: $color-white;
$color-tag-suggestion-hover: $color-grey-light;

ngx-input-tag {
  display: inline-block;
  margin-bottom: 12px;
  width: 100%;
  --color-border: #{$color-border};
  --color-background: #{$color-background};
  --color-tag-close: #{$color-tag-close};
  --color-add-button: #{$color-add-button};
  --color-add-button-background: #{$color-add-button-background};
  --color-tag-suggestion-hover: #{$color-tag-suggestion-hover};
}

.ngx-input-tag {
  padding: 5px 80px 4.5px 4px;
  position: relative;
  margin-bottom: 0;
  border: 1px solid $color-border;
  border: 1px solid var(--color-border);
  background-color: $color-background;
  background-color: var(--color-background);
  font-size: 16px;

  &:focus {
    outline: initial;
  }

  &__input {
    border: 0;
    padding: 4px 0;
    outline: none;
    width: 8px;
    max-width: calc(100% + 70px);
    margin-left: 4px;
    min-width: 4px;
    margin-bottom: 0;
    font-size: 16px;
    min-height: 29px;
  }

  &__tag {
    display: inline-block;
    border: 1px solid $color-border;
    border: 1px solid var(--color-border);
    padding: 4px;
    margin-right: 4px;
    border-radius: 2px;
    height: 29px;
    line-height: 18px;

    button {
      background: transparent;
      border: 0;
      cursor: pointer;
      color: var(--color-tag-close);
    }
  }

  &__btn {
    position: absolute;
    width: 50px;
    height: 41px;
    color: $color-add-button;
    color: var(--color-add-button);
    background-color: $color-add-button-background;
    background-color: var(--color-add-button-background);
    border: 0;
    top: -1px;
    right: -1px;
    cursor: pointer;
    border: 1px solid $color-border;
    border: 1px solid var(--color-border);
    font-size: 30px;
  }
}

.ngx-input-tag-suggestions {
  border: 1px solid $color-border;
  border: 1px solid var(--color-border);
  background-color: $color-background;
  background-color: var(--color-background);

  &__tag {
    padding: 10px 14px;
    border: 0;
    background: transparent;
    display: block;
    cursor: pointer;
    width: 100%;
    text-align: left;

    &:hover {
      background: $color-tag-suggestion-hover;
      background: var(--color-tag-suggestion-hover);
    }
  }
}
