@import "../../css/sass/common"
@import "../../css/sass/media"
@import "../../css/sass/icons"
@import url("../../components/popup/popup.css")
@import url("../../components/plans-chart/plans-chart.css")

.my-profile-sidebar
    position: relative

    .image-preview-wrapper
        position: relative
        overflow: hidden
        display: inline-block

        input[type=file]
            position: absolute
            top: 0
            left: 0
            right: 0
            opacity: 0
            bottom: 0
            cursor: pointer
            z-index: 1

        .image-preview
            width: 110px
            height: 140px
            margin-bottom: $spacer / 2 

            img
                width: 100%
                height: 100%
                background: $upload-zone-bg-color
                object-fit: none

        #navigation
            position: relative

            &:not(.loaded)
                .icon
                    display: none

            &.loading
                &:after
                    content: attr(data-loading)
                    position: absolute
                    text-align: center
                    width: 100%
                    height: 100%
                    left: 0
                    top: -3px

                > *
                    visibility: hidden

        nav.icons
            position: relative
            z-index: 2

            > *
                margin-#{$left}: 5px

    .info
        margin-top: $spacer * 2

        .account-removing
            margin-top: 20px

            +respond-to(mobile)    
                a
                    width: 100%
                    text-align: center

        +respond-to(tablet_only)
            margin-top: 0

body[dir="rtl"] .submit-cell .field.phone
    direction: ltr
    float: right

div.account-removing-popup-password
    div.field.error
        padding-top: 10px

    input[name="account-removing-password-input"]
        width: 100%
        margin-top: 10px
