.profile-settings
    display: flex
    flex-direction: row
    gap: 1rem

    .picture
        margin: 0
        width: 10rem

        position: relative
        display: flex
        flex-direction: column

        border: 1px solid RGBA($white, 0.1)
        box-sizing: content-box

        > img
            height: 10rem
            width: 10rem

            object-fit: cover

            background-color: RGBA($white, 0.02)
            border-bottom: 1px solid RGBA($white, 0.1)
            border-radius: 2px 2px 0 0

            transition: opacity 0.1s ease-in-out

        > input
            height: 100%
            width: 100%

            position: absolute
            top: 0
            left: 0

            opacity: 0

        > label
            padding: 0.5rem 0.7rem
            width: 100%

            text-decoration: none
            text-align: center
            white-space: nowrap
            font-size: 0.9em

            background-color: RGBA($white, 0.02)
            color: RGB($white)
            border-radius: 0 0 2px 2px

            transition: background-color 0.1s ease-in-out

        &:hover
            cursor: pointer

            > img
                opacity: 0.8

            > label
                background-color: RGBA($white, 0.04)

    .other
        width: 100%
        display: flex
        flex-direction: column
        justify-content: space-between
        gap: 0.5rem

        > .text-input
            margin: 0

        > button
            margin: 0 0 0 auto
            width: auto

@media (max-width: 621px)
	.profile-settings
		flex-direction: column

		.picture
			margin: 0 auto
			width: 13rem

			> img
				height: 13rem
				width: 13rem

		.other > button
            margin: 0
            width: 100%