.profile-edit {
    &-dialog {
        &-content {
            padding: 0;
            height: 100%;
        }
    }

    &__main {
        height: 100%;

        &-blocks {
            @extend .d-flex, .flex-row;

            flex-wrap: wrap;
            margin-top: 40px;
            gap: 1rem;

            @include media(mobile) {
                flex-direction: column;
            }
        }

        &-block {
            @extend .blur-bg, .d-flex, .flex-column;

            flex: 1;
            background-color: var(--transp-1);
            border-radius: var(--border1);
            padding: 1.2rem 1.5rem;

            &-body {
                @extend .d-flex, .flex-column;
            }

            &-header {
                padding-bottom: 20px;
                border-bottom: 1px solid var(--transp-1);

                h4 {
                    line-height: 1.5;
                    margin-bottom: 3px;
                }

                p {
                    color: var(--text-400);
                    letter-spacing: .3px;
                    font-size: var(--p-small);
                    line-height: 1.5;
                }
            }
        }
    }

    &__hero {
        @extend .d-flex, .flex-center, .flex-column;

        width: 100%;
        padding-top: 40px;

        &-avatar {
            img {
                object-fit: cover;
                margin-bottom: 15px;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                border: 1px solid var(--transp-1);
            }

            &::after {
                content: "";
                background: radial-gradient(ellipse 50% 60% at 50% 25%, var(--glow-color) 0%, var(--background) 100%);
                opacity: .09;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                height: 100%;
                width: 100%;
                @include transition(all);
            }
        }

        h3 {
            line-height: 1.1;
        }

        p {
            font-size: var(--p-small);
            color: var(--text-500);
            font-weight: 500;
        }
    }

    &__field {
        @extend .d-flex, .flex-row, .align-center;

        padding: .7rem 0;

        &:not(:last-of-type) {
            border-bottom: 1px solid var(--transp-1);
        }

        &:last-of-type {
            padding-bottom: 0;
        }

        &-name {
            flex: 1 0 10%;
            color: var(--text-500);
            letter-spacing: .3px;
            font-size: var(--p-small);
        }

        &-value {
            @extend .d-flex, .flex-row, .align-center;

            gap: 10px;
            flex: 1 0 70%;

            &.value-password {
                flex-direction: column;
                align-items: flex-start;
                gap: 0;

                p {
                    line-height: 1.3
                }
            }
        }

        &-icon {
            @extend .icon-hover;

            font-size: var(--h5);
            align-self: flex-end;
            color: var(--text-300);

            &:hover {
                color: var(--text);
            }
        }
    }

    &__verified {
        color: var(--success);
    }

    &__not-verified {
        color: var(--error);
    }

    &__blocks {
        @extend .d-grid;

        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        margin-top: 1rem;
        gap: 1rem;

        @include media(mobile) {
            grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
        }
    }

    &__block {
        @extend .blur-bg, .d-flex, .flex-column;

        background-color: var(--transp-1);
        border-radius: var(--border1);
        padding: 1.5rem;
        padding-top: 1rem;
        position: relative;
        @include transition(all);
        border: 1px solid transparent;

        &-header {
            @extend .d-flex;

            align-items: center;
            gap: 12px;
            margin-bottom: 5px;

            @include transition();

            svg {
                font-size: var(--h4);
            }
        }

        &-description {
            color: var(--text-500);
            font-size: var(--p-small);
            line-height: 1.5;
            transition: color var(--transition);
        }

        &-arrow {
            font-size: var(--h4);
            position: absolute;
            right: 15px;
            top: 15px;
            transform: rotate(-45deg);
            color: var(--text-500);
            transition: transform var(--transition), color var(--transition);
        }

        &:hover {
            border: 1px solid var(--transp-2);
            background-color: var(--background-900);

            .profile-edit__block-header {
                color: var(--accent);
            }

            .profile-edit__block-description {
                color: var(--text-300);
            }

            .profile-edit__block-arrow {
                color: var(--text-300);
                transform: translate(10%, -10%) rotate(-45deg);
            }
        }

        &:focus-within {
            border: 1px solid var(--transp-2);
            background-color: var(--background-900);
        }
    }

    &__last-changed {
        font-size: var(--small);
        color: var(--text-400);
    }

    &__error {
        color: var(--error);
        letter-spacing: .3px;
        font-weight: 500;
    }


    // With sidebar
    &__sidebar {
        @extend .d-flex, .flex-column, .blur-bg;

        padding: 1rem;
        padding-top: 2rem;
        border-radius: var(--border1);
        border: 1px solid var(--transp-1);
        background-color: var(--blurred-background);
        min-height: 400px;
        position: sticky;
        top: 90px;

        &-hero {
            @extend .d-flex, .flex-center, .flex-column;

            width: 100%;
            border-bottom: 1px solid var(--transp-1);
            margin-bottom: 10px;
            padding-bottom: 20px;

            img {
                object-fit: cover;
                margin-bottom: 7px;
                width: 80px;
                height: 80px;
                border-radius: 50%;
                border: 1px solid var(--transp-1);
            }

            h3 {
                line-height: 1.1;
            }

            p {
                font-size: var(--p-small);
                color: var(--text-500);
                font-weight: 500;
                line-height: 1.4;
            }
        }

        // Remove default styles
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        &-items {
            @extend .flex-between, .flex-column;

            align-items: flex-start;
            flex: 1 0;
            height: 100%;

            ul {
                @extend .d-flex, .flex-column;

                gap: 5px;
                flex: 1;
                width: 100%;

                li {
                    width: 100%;
                }
            }
        }

        &-item {
            @extend .d-flex;

            cursor: pointer;
            gap: 10px;
            align-items: center;
            font-size: var(--p-small);
            padding: 6px 16px;
            border-radius: var(--border05);
            @include transition(all);
            color: var(--text-300);
            font-weight: 500;
            width: 100%;
            box-shadow: var(--shadow-small);

            svg {
                font-size: var(--h5);
            }

            &:hover {
                background-color: var(--transp-1);
                color: var(--text-200);
            }

            &.active {
                background-color: var(--transp-2);
                color: var(--text);
            }
        }

        &-footer {
            border-top: 1px solid var(--transp-1);
            padding-top: 15px;
            margin-top: 15px;
            width: 100%;
        }
    }


    // Edit card
    &__card {
        &-header {
            margin-bottom: 15px;

            h3 {
                line-height: 1.2;
            }

            p {
                color: var(--text-500);
                line-height: 1.5;
                margin-top: 10px;
            }
        }

        &-footer {
            display: flex;
            justify-content: flex-end;
        }
    }

    // Socials tab

    &__socials {
        @extend .flex-column;

        &-item {
            @extend .flex-row, .flex-between;

            padding: 1rem 1.5rem;

            &:not(:last-of-type) {
                border-bottom: 1px solid var(--transp-1);
            }

            &-info {
                @extend .flex-row, .flex-between;

                gap: 1.25rem;

                svg {
                    font-size: var(--h3);
                }

                h6 {
                    color: var(--text-200);
                    line-height: 1;
                }

                .link {
                    font-size: var(--p-small);
                }
            }
        }

        &-main {
            @extend .d-flex, .flex-column;

            align-items: flex-start;
        }

        &-unbind {
            font-size: var(--small);
            color: var(--text-400);
            line-height: 1.4;
            letter-spacing: .3px;
            cursor: pointer;

            &:hover {
                color: var(--text-200);
            }
        }
    }
}

.profile-settings {

    &__avatar,
    &__banner {
        max-height: 200px;

        input {
            visibility: hidden;
        }
    }

    &__avatar {
        max-width: 200px;
    }

    &__banner {
        height: 100%;
    }

    &__section {
        @include media(pc) {
            &#images-settings {
                height: 530px;
                display: flex;
                flex-direction: column;
            }
        }

        &#images-settings .form-field {
            min-height: 240px;
        }
    }
}

#tab-content {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: var(--transition);
}

@keyframes fadeInOpacity {
    0% {
        transform: translateY(-5px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}