/* Copyright (C) 2016 NooBaa */

account-menu {
    display: block;
    position: relative;

    .menu-header {
        color: rgb(var(--color08));
        background-color: rgb(var(--color16));
        height: 60px;

        > .user-email {
            min-width: 140px;
            max-width: 140px;
        }
    }

    .menu-items {
        color: rgb(var(--color02));
        background: rgb(var(--color16));
        top: 100%;
        left: 0;
        right: 0;
        position: absolute;
        max-height: 0;
        transition: max-height 250ms ease-out;
        overflow-y: hidden;
        cursor: @cursor-pointer;

        > hr {
            margin: 0;
            border-color: rgb(var(--color13));
        }

        .menu-item {
            all: unset;
            box-sizing: border-box;
            width: 100%;
            padding:  2/3*@gutter @gutter;
            vertical-align: middle;
            display: block;
            border: none;
            background: none;

            &.disabled {
                cursor: default;
                color: rgb(var(--color11));
                opacity: .5;
            }

            &:not(.disabled):hover {
                background-color: rgb(var(--color15));
            }
        }

        .theme-switch {
            display: flex;
            align-items: center;

            &::after {
                content: '';
                display: inline-block;
                width: 16px;
                height: 16px;
                border-radius: 16px;
                margin-left: auto;
                background : rgb(var(--color17));
                box-shadow: 0 0 8px rgb(var(--color02));
                transition: all 300ms ease-out;
            }
        }
    }

    .open {
        > .menu-header, > .menu-items {
            box-shadow: -2px 2px 4px rgba(var(--shadow1));
        }

        > .menu-items {
            max-height: 300px;
        }
    }
}
