.tag-content {
  position: relative;
  padding: .375rem .875rem;
  margin-bottom: .625rem;
  background: var(--#{$variable-prefix}background-white);
  border: 1px solid rgba(var(--bs-primary-color), .75);
  border-radius: .375rem;
  &.state-default{
    border-color: var(--#{$variable-prefix}input-floating-border);
  }
  &.invalid-tag{
    border-color: #f46582;
  }
  h4 {
    margin: 0 0 .5rem;
    font-size: .625rem;
    font-weight: 600;
    line-height: .813rem;
    color: var(--#{$variable-prefix}tag-title-color);
  }
}

.input-tag-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  .form-control {
    flex: 1;
    min-width: 6.25rem;
    height: 1.375rem;
    padding: 0;
    font-size: .75rem;
    font-style: normal;
    font-weight: 500;
    font-stretch: normal;
    line-height: .688rem;
    text-align: left;
    letter-spacing: normal;
    background: var(--#{$variable-prefix}background-white);
    border: 0;
    border-radius: .188rem;
    box-shadow: none;
    &:focus,
    &:hover {
      border: 0;
      box-shadow: none;
    }
  }
}

.tag-badge {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .5rem;
  list-style: none;
  background: var(--#{$variable-prefix}bg-tag-badge);
  border-radius: .125rem;

  span {
    font-size: .563rem;
    font-style: normal;
    font-weight: 900;
    font-stretch: normal;
    line-height: .688rem;
    text-align: left;
    text-transform: inherit;
    letter-spacing: .018rem;
  }
  .tag-close-icon {
    display: flex;
    align-items: center;
    color: #979ba3;
    svg {
      width: .5rem;
      cursor: pointer;
    }
  }
}

.add-category-wrap {
  align-items: flex-start;
  p {
    max-width: 40%;
    @media (max-width: 575px) {
      max-width: 100%;
    }
    strong {
      color: var(--#{$variable-prefix}dark-text-color);
    }
  }
}

.publish-tooltip-wrap{
  .error-info{
    display: none;
    svg{
      width: .625rem;
      height: .625rem;
      transform: scale(1.25);
      transform-origin: bottom;
    }
  }
}

.publish-tooltip {
  position: absolute;
  top: inherit;
  right: -5px;
  bottom: calc(100% + 9px);
  min-width: 12.063rem;
  padding: .5rem .8rem;
  span{
    text-transform: inherit;
  }
  svg{
    display: none;
  }
}


// Error handling
.invalid-email {
  &.tag-badge {
    background: #ffdcdc;
    > span{
      color: #c51212;
    }
    .error-info{
      display: block;
      color: #c51212;
    }
    .tag-close-icon{
      color: #c51212;
    }
  }
  .tag-content {
    border-color: #f46582;
    .form-control:valid:focus,
    .form-control.is-valid:focus{
      box-shadow: none;
    }
  }
  .invalid-feedback{
    display: block;
  }
}