@import "../../../style/variables.scss";


.my-account-wrapper {
    .my-account-content {
        .user-info {
            padding: 20px;
            column-gap: 20px;
            position: relative;
            @media only screen and (min-width: 1441px) {
                column-gap: 32px;
            }

            .users-content {
                max-width: 550px;
                @media only screen and (min-width: 1441px) {
                    max-width: 660px;
                }
                h3 {
                    font-size: 22px;
                    margin-bottom: 12px;
                    @media only screen and (min-width: 768px) {
                        font-size: 24px;
                    }
                    @media only screen and (min-width: 1600px) {
                        margin-bottom: 16px;
                    }
                }
                .email,
                p,
                span {
                    font-size: 18px;
                    line-height: 22px;
                    color: $darkGrey;
                    margin-bottom: 12px;
                    @media only screen and (min-width: 768px) {
                        font-size: 20px;
                        line-height: 24px;
                    }
                    @media only screen and (min-width: 1600px) {
                        font-size: 22px;
                        line-height: 26px;
                        margin-bottom: 16px;
                    }
                }
                .birthdate {
                    margin-bottom: 12px;
                    @media only screen and (min-width: 1600px) {
                        margin-bottom: 16px;
                    }
                    i {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: $primary;
                        font-size: 24px;
                    }
                    span {
                        margin-bottom: 0;
                        margin-left: 10px;
                    }
                }
                .social-links {
                    gap: 16px;
                    li {
                        a{
                            column-gap: 5px;
                            &:hover{
                                span{
                                    color: $tertiary;
                                }
                            }
                        }
                        span {
                            margin-bottom: 0;
                            line-height: initial;
                            transition: 0.4s all;
                        }
                        i {
                            color: $primary;
                            font-size: 22px;
                            @media only screen and (min-width: 1200px) {
                                font-size: 24px;
                            }
                        }
                    }
                }
            }
            .account-edit-btn {
                position: absolute;
                right: 20px;
                top: 20px;
            }
        }
    }
    .common-content {
        padding: 20px;
        position: relative;
        .wrap-title {
            gap: 10px;
            margin-bottom: 15px;
            @media only screen and (min-width: 1200px) {
                margin-bottom: 20px;
            }
            h3 {
                margin-bottom: 0;
            }
        }
    }
    .content-title {
        font-size: 20px;
        line-height: 24px;
    }
    .contact-admin {
        .user-content-list {
            li {
                h4 {
                    color: $primary;
                    font-weight: 700;
                    &.email {
                        a{
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }
}
.account-edit-btn {
    padding: 8px 10px;
    color: $primary;
    display: flex;
    align-items: center;
    border-color: $primary;
    column-gap: 10px;
    font-size: 16px;
    position: relative;
    @media only screen and (min-width: 640px) {
        position: absolute;
        right: 20px;
        top: 20px;
    }
    @media only screen and (min-width: 1441px) {
        padding: 13px 10px;
        font-size: 18px;
    }
    @media only screen and (min-width: 1600px) {
        font-size: 22px;
    }
    i {
        font-size: 16px;
        @media only screen and (min-width: 1200px) {
            font-size: 18px;
        }
        @media only screen and (min-width: 1600px) {
            font-size: 20px;
        }
    }
    &:hover {
        color: $white;
        background-color: $primary;
        border-color: $primary;
        i {
            &::before {
                color: white;
                transition: all 0.4s;
            }
        }
    }
}
.my-account {
    column-gap: 20px;
    @media only screen and (min-width: 1600px) {
        column-gap: 32px;
    }
}
.my-account-sidebar {
    padding: 20px;
    margin-bottom: 0;
    // display: flex;
    // align-items: center;
    gap: 15px;
    overflow-x: auto;
    // scrollbar-color: rgba(253, 158, 85, 0.5);
    // &::-webkit-scrollbar-track{
    //     background-color: #E6D8C5;
    // }
    // &::-webkit-scrollbar-thumb{
    //     background-color: rgba(253, 158, 85, 0.5);
    // }
    @media only screen and (min-width: 768px){
        gap: 20px;
    }
    @media only screen and (min-width: 1200px){
        min-width: 230px;
        width: 230px;
        display: block;
    }
    @media only screen and (min-width: 1600px) {
        min-width: 288px;
        width: 288px;
    }
    li {
        @media only screen and (min-width: 1200px){
            margin-bottom: 20px;
        }
        a {
            font-size: 16px;
            color: $btnText;
            padding: 8px 12px;
            display: block;
            border: 1px solid $dust;
            border-bottom: none;
            white-space: nowrap;
            text-transform: capitalize;
            @media only screen and (min-width: 768px){
                padding: 12px 16px;
                font-size: 18px;
            }
            @media only screen and (min-width: 1200px){
                border: 1px solid $dust;
            }
            &:hover,
            &.active {
                background-color: $tertiary;
                color: $white;
                border-color: $tertiary;
            }
        }
        &:last-child {
            margin-bottom: 0;
            a{
                border-bottom: 1px solid $dust;
            }
        }
    }
}

.dashboard-form-btn{
    padding: 8px 10px;
    color: $white;
    border-color: $tertiary;
    column-gap: 10px;
    font-size: 16px;
    min-width: 120px;
    position: relative;
    @media only screen and (min-width: 1440px) {
        padding: 13px 10px;
        font-size: 18px;
        position: absolute;
        right: 20px;
        bottom: 50px;
    }
}
.account-title{
    margin-bottom: 20px;
    gap: 10px;
    h2{
        margin-bottom: 0;
    }
}
.account-details{
    padding: 20px;
    position: relative;
    @media only screen and (min-width: 1200px){
        margin-top: 0;
    }
    h2{
        font-size: 18px;
        line-height: 24px;
        @media only screen and (min-width: 640px){
            font-size: 20px;
        }
    }
    .account-common-details{
        // @media only screen and (min-width: 1200px){
        //     max-width: 500px;
        // }
        @media only screen and (min-width: 1440px){
            max-width: 70%;
        }
    }
    .user-profile{
        .users-image{
            margin-bottom: 0;
            position: relative;
        }
        .error-msg{
            overflow: inherit;
            text-overflow: inherit;
            left: -50%;
            transform: translateX(50%);
        }
        .edit-profile{
            position: absolute;
            right: 0;
            bottom: 0;
            color: $white;
            width: 30px;
            height: 30px;
            border-radius: 100%;
            background: $tertiary;
            overflow: hidden;
            @media only screen and (min-width: 768px){
                width: 40px;
                height: 40px;
            }
            @media only screen and (min-width: 1600px){
                width: 50px;
                height: 50px;
            }
            input{
                position: absolute;
                left: 0;
                top: 0;
                padding: 0;
                width: 100%;
                height: 100%;
                cursor: pointer;
                opacity: 0;
                z-index: 1;
                border-radius: 100%;
            }
            i{
                font-size: 16px;
                @media only screen and (min-width: 768px){
                    font-size: 20px;
                }
                @media only screen and (min-width: 1440px){
                    font-size: 24px;
                }
            }
            input[type=file]::-webkit-file-upload-button {
                cursor: pointer;
            }
            &:hover{
                border-color: $tertiary;
                color: $white;
                i{
                    color: $white;
                }
            }
        }
    }
    .dashboard-form-btn{
        padding: 6px 20px;
        min-width: auto;
        margin-top: 10px;
        @media only screen and (min-width: 640px){
            min-width: 120px;
            padding: 12px 20px;
        }
        @media only screen and (min-width: 1024px){
            margin-top: 0px;
        }
        @media only screen and (min-width: 1200px){
            min-width: 172px;
            padding: 14px 20px;
        }
    }
    .add-link-btn{
        border-color: $mainBorder;
        color: $primary;
        padding: 8px 10px;
        @media only screen and (min-width: 1200px){
            padding: 15px 10px;
        }
        &:hover{
            color: $white;
            border-color: $tertiary;
        }
    }
}