.content {
    border-radius: var(--border-radius-sm);
    border: var(--border-width-sm) solid var(--border-color-alpha-black-10);
    color: var(--color-text-primary-inverted);
    width: 360px;
    max-width: 100%;
    padding: var(--spacing-24);
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 8px 10px -6px var(--border-color-alpha-black-10);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-16);
    outline: none;
}

.content[data-style='light'] {
    border-color: var(--border-color-alpha-black-10);
    background-color: var(--color-bg-fill-brand-inverse);
    color: var(--color-text-primary);
}

.content[data-style='dark'] {
    border-color: var(--border-color-alpha-white-10);
    background-color: var(--color-bg-fill-neutral-dark);
    color: var(--color-text-primary-inverted);
}

.blurred {
    backdrop-filter: blur(25px);
}

.blurred[data-style='light'] {
    background-color: var(--color-bg-fill-alpha-white-10);
    color: var(--color-text-primary-inverted);
}

.blurred[data-style='dark'] {
    background-color: var(--color-bg-fill-alpha-black-10);
    color: var(--color-text-primary);
}

.contentHeader {
    position: relative;
    width: 100%;
    padding-right: var(--spacing-40);
}

.closeButton {
    position: absolute;
    top: 5px;
    right: 0;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    border: none;
    background: none;
    display: none;
    color: inherit;
}

.closeIcon {
    width: 22px;
    height: 12px;
    margin: 0 4px;
}

@media (width <= 768px) {
    .closeButton {
        display: flex;
    }
}
