.tags-container {
    position: relative;
    height: 32px;
}

.tag-check {
    display: none;
}

.tags-container .span {
    display: none;
}

.span svg {
    width: 28px;
}

.tags-container .span {
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.tags-modal {
    position: absolute;
    top: 100%;
    left: 0;
    height: 0;
    overflow: hidden;
    width: 300px;
    background-color: var(--white);
    box-shadow: 10px 10px 0 transparent;
    border: 1px solid var(--red);
    border-color: transparent;
    border-radius: 4px;
    transition: var(--short-transition);
}

.tag-check:checked + .tags-modal {
    height: 300px;
    border-color: var(--red);
    box-shadow: 10px 10px 0 var(--brown-transparent);
}

.add-tag-form {
    display: grid;
    grid-template-columns: auto 33px 33px;
    grid-gap: 8px;
    padding: 0 4px;
    padding-bottom: 10px;
    background-color: var(--white);
    position: sticky;
    top: 0;
}

.tag-color {
    padding: 0;
    cursor: pointer;
}

.tag-submit {
    border-radius: 50%;
    background-color: var(--red);
    margin-top: 0.5rem;
    transition: var(--short-transition);
} .tag-submit:hover {
    background-color: var(--yellow);
}

.tag-submit svg {
    position: relative;
    top: 7px;
    left: 8px;
    width: 18px;
    cursor: pointer;
}

.tag-list {
    display: none;
}

.listed .tag-list {
    display: block;
    overflow: auto;
    scrollbar-width: thin;
    height: 247px;
    border-radius: 4px;
    padding: 0 4px;
}

.listed .confirm-remove-tag {
    display: none;
}

.confirm-remove-tag {
    display: block;
    height: 100%;
    background-color: var(--red-transparent);
    height: 247px;
}

.tag-form-hidden {
    display: none;
}

.tag-element {
    display: inline-block;
    padding: 0 6px 4px 12px;
    border-radius: 12px;
    cursor: pointer;
    margin-bottom: 6px;
}

.remove-tag svg {
    position: relative;
    top: 4px;
    width: 18px;
}

.tag-element.white-color {
    color: var(--white);
}

.tag-element.black-color {
    color: var(--brown);
}

.tag-element.white-color svg {
    stroke: var(--white);
}

.tag-element.black-color svg {
    stroke: var(--brown);
}

.confirm-remove-tag {
    padding: 2rem;
}

.confirm-remove-tag .confirm-button {
    background-color: var(--black);
    display: block;
    padding: 1rem;
    text-align: center;
    color: var(--white);
    cursor: pointer;
    transition: var(--short-transition);
    margin-top: 0.4rem;
} .confirm-remove-tag .confirm-button:hover {
    background-color: var(--white);
    color: var(--brown);
}

.confirm-remove-tag .accept-remove-tag {
    background-color: var(--red);
    margin-top: 1rem;
}