.editable-h2 {
    font-size: var(--s1);
    font-family: inherit; /* Ensure the same font is used */
    font-weight: 600;
    border: none; /* Remove input field border */
    padding: 0; /* Match the spacing of the <h2> */
    margin: 0; /* Remove margin */
    background: transparent; /* Make background transparent */
    width: 100%; /* Ensure the input takes the full width */
    outline: none; /* Remove focus outline */
    color: inherit; /* Use the same text color */
}

.error {
    font-size: var(--s0);
    color: red;
}

.edit-icons {
    display: flex;
    justify-content: flex-end;
    margin-block-end: var(--s-3);
    margin-block-start: var(--s-3);
    gap: var(--s-3);
}

.edit-icon-small {
    width: 1.5em;
    height: 1.5em;
}

/* for the delete button of badges */

.badge {
    display: flex;
}

.badge-name {
    margin-right: 0;
}

.badge-delete-button {
    background-color: transparent;
    color: var(--font-color);
    border: none;
    cursor: pointer;
    padding-right: 0;
}

.badge-delete-button\:white {
    color: white;
}

.badge-delete-button:hover svg {
    color: #ff0000; /* Optional: change color on hover */
}

/* htmx animations */

#identity.htmx-swapping {
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

#identity.htmx-added {
    opacity: 0;
}

#identity {
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

/* avatar container */

img.editable-avatar,
svg.editable-avatar {
    cursor: pointer; /* Indicate it's clickable */
    transition: border 0.3s ease, background-color 0.3s ease; /* Smooth transitions */
}

img.editable-avatar:hover,
svg.editable-avatar:hover {
    border: 2px solid #007bff; /* A thicker border on hover */
}

/* Active state: While dragging a file over the container */
img.editable-avatar.drag-over,
svg.editable-avatar.drag-over {
    border: 2px solid #007bff; /* A thicker border on hover */
}