.close-button {
    --border-color: transparent;
    --border-width: 0.125rem;
    --border-radius: 50%;
    --color-background: transparent;
    --icon-color: var(--root-color-text);
    --icon-height: 1rem;
    --icon-width: 0.125rem;
    --size: 2rem;
}

.close-button {
    border-style: solid;
    position: relative;
    cursor: pointer;
    margin-left: 1.5rem;
}

.close-button::before,
.close-button::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    transform-origin: top left;
}

.close-button::before {
    transform: rotate(45deg) translate(-50%, -50%);
}

.close-button::after {
    transform: rotate(-45deg) translate(-50%, -50%);
}

.close-button {
    width: var(--size, 2rem);
    height: var(--size, 2rem);
    border-width: var(--border-width, 0.125rem);
    border-color: var(--border-color, white);
    border-radius: var(--border-radius, 50%);
    background-color: var(--color-background, black);
}

.close-button::before,
.close-button::after {
    width: var(--icon-width, 0.125rem);
    height: var(--icon-height, 1.25rem);
    background-color: var(--icon-color, white);
}