.container-theme-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 1.5rem;
    background-color: var(--ColorRow);
}

.container-avatar-selector {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.container-title-selector {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
}

.container-theme-selector .theme-selector {
    flex: unset;
    width: unset;
}

.container-avatar-selector .avatar-selector {
        width: calc(25% - 0.75rem);
        aspect-ratio: 1/1;
    }

@container modalContent (max-width: 600px) {
    .container-avatar-selector .avatar-selector {
        width: calc(33.33% - 0.67rem);
    }
}

@container modalContent (max-width: 420px) {
    .container-avatar-selector .avatar-selector {
        width: calc(50% - 0.5rem);
    }
}

.container-title-selector .title-selector {
    width: 100%;
}

.container-title-selector .title-selector.locked {
    cursor: not-allowed;
    opacity: 0.5;
}

.container-avatar-selector .avatar-selector.locked {
    cursor: not-allowed;
}

.container-avatar-selector .avatar-selector.locked span {
    position: relative;
}

.container-avatar-selector .avatar-selector.locked img, .container-avatar-selector .avatar-selector.locked video {
    opacity: 0.4;
}

.container-avatar-selector .avatar-selector.locked .lock-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--ColorText);
    font-size: 1.5rem;
}

.container-avatar-selector .avatar-selector.locked:hover span {
    border-color: transparent;
}

.container-theme-selector .theme-selector input, .container-avatar-selector .avatar-selector input, .container-title-selector .title-selector input {
    display: none;
}

.container-theme-selector .theme-selector span, .container-avatar-selector .avatar-selector span, .container-title-selector .title-selector span {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    height: 2rem;
    background-color: transparent;
    cursor: pointer;
    color: var(--ColorText);
    border-radius: var(--BorderRadius);
}

.container-title-selector .title-selector span {
    width: 100%;
    background-color: var(--ColorRow);
    padding: 0.75rem 1rem;
    font-family: var(--FontBold);
    height: unset;
    box-shadow: var(--Shadow);
}

.container-title-selector .title-selector input:checked ~ span {
    background-color: var(--ColorPrimary);
    color: var(--ColorPrimaryText);
}

.container-theme-selector .theme-selector span {
    padding: 0.5rem 1rem;
}

.container-theme-selector .theme-selector span.round, .container-avatar-selector .avatar-selector span.round {
    width: 2rem;
    border-radius: 100%;
    padding: 0px;
}

.container-avatar-selector .avatar-selector span {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    overflow: hidden;
    border: solid 4px transparent;
    background-color: var(--ColorContainer);
    font-size: 1.25rem;
}

.container-avatar-selector .avatar-selector img, .container-avatar-selector .avatar-selector video {
    width: 100%;
}

.container-theme-selector .theme-selector:hover span, .container-theme-selector .theme-selector input:checked ~ span {
    background-color: var(--ColorContainer);
    box-shadow: var(--Shadow);
}

.container-avatar-selector .avatar-selector:hover span {
    border-color: var(--ColorPrimary50);
}

.container-avatar-selector .avatar-selector input:checked ~ span {
    border-color: var(--ColorPrimary);
}