@use '../../../../styles/_globals.scss' as *;

:host {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  min-width: 20px;
  padding: 0 var(--s);
  padding-left: 0;
  font-size: 10px;
  border-radius: var(--s2);
  cursor: pointer;
  vertical-align: middle;
  color: var(--text-color-less-intense);
}

.tag-title {
  display: block;
  font-size: 12px;
  line-height: 1.15;

  color: var(--text-color-muted);

  //// hide inside add task bar for smaller screens
  ///* TODO(mdc-migration): The following rule targets internal classes of autocomplete that may no longer apply for the MDC version.*/
  //:host-context(.mat-autocomplete-panel) & {
  //  @include mq(xs, max) {
  //    display: none;
  //  }
  //}
}

.circle,
.tag-ico {
  display: block;
  padding: 0;

  // needs to be important to overwrite inside mat option
  margin-right: 3px !important;
}

$ico-size: 13px;
.tag-ico {
  font-size: $ico-size;
  height: $ico-size;
  width: $ico-size;
  color: var(--text-color-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tag-ico-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
  width: $ico-size;
  height: $ico-size;
  margin-right: 3px !important;
}

$circle-size: 9px;
.circle {
  font-size: $circle-size;
  height: $circle-size;
  width: $circle-size;
  border-radius: 50%;
}
