.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-theme-selector .theme-selector {
    flex: unset;
    width: unset;
}

.container-avatar-selector .avatar-selector {
    flex: 1 0 calc(33.33% - 1rem);
    max-width: calc(34.74% - 1rem);
    aspect-ratio: 1/1;
}

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

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

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

.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 {
    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-theme-selector .theme-selector:hover input:disabled ~ span, .container-theme-selector .theme-selector input:disabled ~ span {
    opacity: 0.5;
    cursor: not-allowed;
}

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