/* Free tag entry – the box that stands in for a <select multiple data-tag-input>.
   Behaviour: static/js/tag-input.js. Shown in the styleguide under "Formulare".

   The box is a .form-control, so it inherits Tabler's border, radius, height and focus
   ring; only the inner layout is defined here. */

.tag-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    /* Height comes from the content: one row of tags looks like a normal field, more rows
       let the box grow instead of scrolling. */
    height: auto;
    min-height: var(--tblr-form-control-height, 2rem);
    padding: .1875rem .4375rem;
    cursor: text;
}

/* The field carries no frame of its own – the box around it is the field. */
.tag-input-field {
    flex: 1 1 6rem;
    min-width: 6rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    outline: none;
}

.tag-input-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.tag-input-remove {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    opacity: .6;
    cursor: pointer;
}

.tag-input-remove:hover {
    opacity: 1;
}

/* The box takes the focus ring while the field inside is the one focused. */
.tag-input:focus-within {
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--tblr-primary-rgb), .25);
}