/* TODO: ... don't follow figma. use the css variables. i'll fix this later - t1stm */

body {
    display: flex;
    width: 100svw;
    height: 100svh;
    flex-direction: column;
}

#settings-view {
    margin-left: 20px;
    width: 700px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#settings-view h1 {
    margin: 0;
    font-size: 36px;
}
#settings-view h2 {
    font-size: 24px;
    margin: 0;
}

.settings-section {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 20px !important;
}

#balkanvatars-section {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

#balkanvatars-selection {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    align-self: stretch;
    overflow: auto;
}

#user-profile-picture {
    width: 120px;
    height: 120px;
    border-radius: 10px;
}
#balkanvatars {
    gap: 3px;
    overflow-y: scroll;
    max-width: 100%;
}

.balkanvatar {
    min-width: 64px;
    height: 64px;
    border-radius: 5px;
    cursor: pointer;
}

::-webkit-scrollbar-corner {
    background: rgba(0,0,0,0);
}

.flair-selection {
    border-radius: 10px;
    gap: 10px;

    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;

    background: var(--text-box);
    box-shadow: 0 -1px 0 0 rgba(231, 245, 249, 0.09) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.20) inset;
    padding: 10px;
    align-content: flex-start;
}

.w-username {
    color: var(--w-color) !important;
}

.l-username {
    color: var(--l-color) !important;
}

#settings-description {
    display: flex;
    padding: 10px;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border-radius: 10px;
    background: var(--text-box);
    box-shadow: 0 -1px 0 0 rgba(231, 245, 249, 0.09) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.20) inset;

    height: 96px;
}

.settings-submit {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    align-self: stretch;
}

.flair-selection > .flair {
    white-space: wrap;
}

#update-colors {
    align-self: end;
}

.settings-section > form input {
    width: 100%;
}

#select-flair-container > div {
    width: 100%;
    display: flex;
    flex-direction: column;
}

@media screen and (any-hover: none) and (max-width: 990px) {
    #select-flair-container {
        flex-direction: column;
    }

    #balkanvatars-section {
        flex-direction: column;
    }
}