libs/barista-components/tag/src/tag-add/tag-add.scss
@import '../../../style/font-mixins';
@import '../../../core/src/style/variables';
@import '../../../core/src/style/interactive-common';

:host {
  display: inline-block;
  cursor: pointer;

  .dt-tag-add-container {
    position: relative;
  }

  .dt-tag-add-button {
    height: 24px;
    min-width: 88px;
    font-size: 12px;
    display: inline-flex;
    color: $turquoise-700;
    background-color: #ffffff;
    text-align: left;
    vertical-align: middle;
    border: 1px solid $turquoise-600;
    border-radius: 12px;
    // The tag-add button relied on the user-agent styling of the button. When
    // inserting a normalize.css or reset.css into your project, the padding on
    // the button element was changed, which resulted in a broken visual on the
    // tag-add.
    padding: 2px 6px 1px;
    cursor: pointer;

    &:active {
      outline: none;
    }

    &:focus {
      outline: 0;
    }
  }

  .dt-tag-add-button-text {
    height: 16px;
    vertical-align: middle;
    line-height: 16px;
    margin-left: 4px;
    margin-right: 4px;
  }
}

.dt-tag-add-overlay {
  width: 320px;
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr 32px;
  grid-template-rows: 32px 1fr fit-content(32px);
  grid-template-areas:
    'header close'
    'form form'
    'submit submit';
  border: 1px solid $gray-700;
  border-radius: 3px;
  background-color: $gray-700;
  padding: 8px;
  position: relative;
}

.dt-tag-add-header {
  color: #ffffff;
  grid-area: header;
  font-size: 14px;
  outline: inherit;
  display: flex;
  gap: 8px;
  align-items: center;

  @include dt-text-ellipsis();
  @include dt-cdkmonitor-focus-style(true);
}

.dt-tag-add-icon,
.dt-tag-add-icon-button {
  width: 16px;
  height: 16px;
  min-width: 16px;
  vertical-align: text-top;
  fill: #ffffff;

  &.dt-tag-add-icon-button {
    margin-left: 2px;
  }
}

.dt-tag-add-icon-button {
  fill: $turquoise-600;
}

dt-tag-add-button {
  grid-area: submit;
  max-width: 100%;

  ::ng-deep .dt-tag-add-submit-button {
    max-width: 100%;

    @include dt-text-ellipsis();
  }
}

.dt-tag-add-custom-form {
  grid-area: form;
}

.dt-tag-add-close-button {
  grid-area: close;
}

.dt-tag-add-default-form {
  grid-area: form;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  .dt-tag-add-input {
    flex-grow: 1;
    flex-basis: max-content;
  }
}

.dt-tag-add-header-text {
  @include dt-text-ellipsis();
}
