@import "brackets_variables.less";

.profile-popup {
    background-color: @bc-panel-bg;
    color: @bc-menu-text;
    border-radius: @bc-border-radius;
    box-shadow: 0 3px 9px @bc-shadow;
    width: 300px;
    overflow: hidden;
    position: absolute;
    z-index: @z-index-brackets-context-menu-base;
    transform-origin: 0 0;

    .popup-header-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .popup-close-btn {
        width: 24px;
        height: 24px;
        padding: 0;
        background: none;
        border: none;
        border-radius: @bc-border-radius;
        cursor: pointer;
        color: @bc-text-medium;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s ease, background-color 0.2s ease;
        flex-shrink: 0;

        &:hover {
            color: @bc-text-emphasized;
            background-color: @bc-btn-bg;
        }

        &:focus {
            outline: none;
            box-shadow: 0 0 0 2px @bc-btn-border-focused;
        }
    }

    .popup-header {
        padding: 12px 15px;
        border-bottom: 1px solid @bc-menu-separator;
    }

    .popup-body {
        padding: 12px 15px;
    }

    .popup-title {
        margin: 0;
        font-size: 16px;
        font-weight: @font-weight-semibold;
        color: @bc-menu-text;
    }

    .user-profile-header {
        display: flex;
        align-items: center;
    }

    .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: @bc-primary-btn-bg;
        color: @bc-text-alt;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        font-weight: @font-weight-semibold;
        font-size: 16px;
    }

    .user-info {
        display: flex;
        flex-direction: column;
    }

    .user-name {
        font-weight: @font-weight-semibold;
        font-size: 16px;
        color: @bc-menu-text;
    }

    .user-email {
        font-size: 12px;
        color: @bc-menu-text;
    }

    .user-plan-paid {
        color: #2ea56c;
        font-size: 12px;
        font-weight: @font-weight-semibold;
    }

    .user-plan-free {
        color: #3b82f6;
        font-size: 12px;
    }

    .profile-section {
        margin-bottom: 20px;
    }

    .quota-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
        font-size: 13px;
    }

    .progress-bar {
        width: 100%;
        height: 8px;
        background-color: #fff;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid @bc-btn-border;
        box-sizing: border-box;

        .progress-fill {
            height: 100%;
            background-color: @bc-primary-btn-bg;
            border-radius: 3px;
        }
    }

    .support-link {
        margin-top: 6px;
        text-align: center;
        width: 100%;
    }

    .menu-button {
        width: 100%;
        text-align: left;
        padding: 8px 12px;
        margin: 3px 0;
        display: flex;
        justify-content: center;
        align-items: center;

        i {
            margin-right: 8px;
            width: 20px;
            text-align: center;
        }

        &.signout {
            color: #d44;
        }
    }

    .text-link {
        background: none;
        border: none;
        box-shadow: none;
        cursor: pointer;
        color: @bc-text-medium;
        font-size: (@baseFontSize + 1);
        padding: 8px 12px;
        margin: 3px 0;
        width: 100%;
        text-align: center;
        transition: color 0.2s ease;

        i {
            margin-right: 5px;
        }

        &:hover, &:focus {
            color: @bc-text-emphasized;
            outline: none;
        }

        &.menu-button {
            text-align: left;
        }
    }

    .btn.dialog-button {
        background-color: @bc-btn-bg;
        color: @bc-text;
        border: 1px solid @bc-btn-border;
        border-radius: @bc-border-radius;
        box-shadow: inset 0 1px @bc-highlight-hard;
        font-size: (@baseFontSize + 1);
        font-weight: @font-weight-semibold;
        margin: 3px 0;
        transition: background-color 0.2s ease;

        &:not(:disabled):not(.disabled):hover {
            background-color: lighten(@bc-btn-bg, 5%);
            color: @bc-text;
        }

        &:active:not([disabled]) {
            background-color: @bc-btn-bg-down;
            box-shadow: inset 0 1px 0 @bc-shadow-small;
        }

        &.primary {
            background-color: @bc-primary-btn-bg;
            border: 1px solid @bc-primary-btn-border;
            box-shadow: inset 0 1px 0 @bc-highlight;
            color: @bc-text-alt;
            width: 100%;
            padding: 10px 0;

            i {
                margin-right: 5px;
            }

            &:not(:disabled):not(.disabled):hover {
                background-color: lighten(@bc-primary-btn-bg, 10%);
                color: @bc-text-alt;
            }

            &:active:not([disabled]) {
                background-color: @bc-primary-btn-bg-down;
                box-shadow: inset 0 1px 0 @bc-shadow-small;
            }
        }
    }
}

.dark .profile-popup {
    background-color: @dark-bc-panel-bg;
    color: @dark-bc-menu-text;
    box-shadow: 0 3px 9px @dark-bc-shadow;

    .popup-close-btn {
        color: @dark-bc-text-thin-quiet;

        &:hover {
            color: @dark-bc-text;
            background-color: @dark-bc-btn-bg;
        }

        &:focus {
            box-shadow: 0 0 0 2px @dark-bc-btn-border-focused;
        }
    }

    .popup-header {
        border-bottom: 1px solid @dark-bc-menu-separator;
    }

    .popup-title {
        color: @dark-bc-menu-text;
    }

    .user-avatar {
        background-color: @dark-bc-primary-btn-bg;
        color: @dark-bc-text-alt;
    }

    .user-plan-paid {
        color: #3c3;
        font-size: 12px;
    }

    .user-name {
        color: @dark-bc-menu-text;
    }

    .user-email {
        color: @dark-bc-menu-text;
    }

    .progress-bar {
        background-color: @dark-bc-input-bg;
        border-color: @dark-bc-btn-border;

        .progress-fill {
            background-color: @dark-bc-primary-btn-bg;
        }
    }

    .text-link {
        color: @dark-bc-text-thin-quiet;

        &:hover, &:focus {
            color: lighten(@dark-bc-text-thin-quiet, 30%);
        }
    }

    .btn.dialog-button {
        background-color: @dark-bc-btn-bg;
        border: 1px solid @dark-bc-btn-border;
        box-shadow: inset 0 1px 0 @dark-bc-highlight;
        color: @dark-bc-text;

        &:not(:disabled):not(.disabled):hover {
            background-color: lighten(@dark-bc-btn-bg, 10%);
            color: @dark-bc-text;
        }

        &:active:not([disabled]) {
            background-color: @dark-bc-btn-bg-down;
            box-shadow: inset 0 1px 0 @dark-bc-shadow-small;
        }

        &.primary {
            background-color: @dark-bc-primary-btn-bg;
            border: 1px solid @dark-bc-primary-btn-border;
            box-shadow: inset 0 1px 0 @dark-bc-highlight;
            color: @dark-bc-text-alt;

            &:not(:disabled):not(.disabled):hover {
                background-color: lighten(@dark-bc-primary-btn-bg, 10%);
                color: @dark-bc-text-alt;
            }

            &:active:not([disabled]) {
                background-color: @dark-bc-primary-btn-bg-down;
                box-shadow: inset 0 1px 0 @dark-bc-shadow-small;
            }
        }
    }
}