@import 'themes/default.less';

:host {
  &.full-width {
    width: 100%;
    nz-tag {
      width: 100%;
    }
  }
  nz-tag {
    margin-right: 0;
    //   padding-left: 4px;
    //   padding-right: 4px;
    margin-inline-end: 4px;
  }
}
.default {
  nz-tag {
    margin: 0;
    padding: 0 2px 0 0;
    margin-inline-end: 4px;
    max-width: 100%;
    .tag-icon,
    .tag-icon-large {
      display: inline-block;
    }
    .tag-icon {
      padding: 3px 2px 3px 4px;
      margin: -3px 0 -3px 0;
    }
    .tag-icon-large {
      padding: 3px 2px 3px 4px;
      margin: -3px 0 -3px 0;
      ::ng-deep svg {
        transform: scale(1.25, 1.25);
      }
    }
    .tag-label {
      display: inline-block;
      margin: 0;
      padding: 0;
      margin: -3px 0 -4px 0;
      padding: 3px 3px 3px 2px;
      line-height: 1;
    }
    ::ng-deep i.ant-tag-close-icon.anticon-close {
      transition: none;
      margin-left: 3px;
    }
  }
}

.compact {
  .default();
}

.menu-item {
  nz-tag {
    // border: @border-width-base @border-style-base @border-color-base;
    background-color: white;
    &.ant-tag-checkable {
      border: @border-width-base @border-style-base @border-color-base;
      &:active {
        background-color: @primary-1;
      }
    }
    &:not(&.ant-tag-checkable-checked):hover {
      color: @text-color;
      border-color: @primary-6;
    }
    &.ant-tag-checkable-checked {
      border: transparent;
      background-color: #ffffff;
      color: @text-color;
    }
  }
}

.select-item {
  .default();
  nz-tag {
    background: #f5f5f5;
    border: 1px solid #f0f0f0;
  }
}

.multi-select-item {
  // pull content margins to the edges of the tag, to increase
  // popover hover area
  display: inline-block;
  margin-top: -3px;
  margin-bottom: -3px;
  margin-left: -4px;
  padding-left: 4px;
  // add space between nz-select's pseudo-tag icon & label
  .tag-icon::after {
    content: ' ';
  }
}

.typeahead-match {
  font-weight: bold;
}
