@import '~app/components/ui/colors.scss';

.loggedInPanel {
}

.activeAccount {
    position: relative;
    display: inline-block;

    $border: 1px solid rgba(#fff, 0.15);
    border-left: $border;
    border-right: $border;
}

.activeAccountButton {
    composes: green from '~app/components/ui/buttons.scss';
}

.activeAccountExpanded {
    .activeAccountButton {
        background-color: darker($green);
    }

    .accountSwitcherContainer {
        display: block;
    }

    .expandIcon {
        transform: rotate(-180deg);

        html[dir='rtl'] & {
            transform: rotate(180deg); // Fix spin direction
        }
    }
}

.userIcon {
    composes: user from '~app/components/ui/icons.scss';

    position: relative;
    bottom: 2px;

    padding-inline-end: 5px;
}

.expandIcon {
    composes: caret from '~app/components/ui/icons.scss';

    margin-inline-start: 4px;
    font-size: 6px;
    color: #ccc;
    transition: 0.2s;
}

.userName {
}

.accountSwitcherContainer {
    position: absolute;
    top: 100%;
    inset-inline-end: -2px;
    cursor: auto;

    display: none;
}