/*** Common UI elements ***/

#taskmenu {
    a {
        text-decoration: none;
        padding: 0.4em 0;
    }

    a.button {
        display: block;
        width: 60px;
        text-align: center;
        color: @taskmenu-button-color;

        &:hover {
            color: @taskmenu-button-hover-color;
        }

        &.selected {
            color: @taskmenu-selected-button-color;
        }

        &:before {
            &:extend(.font-icon-class);
            font-size: 1.5em;
            margin-bottom: 0.1em;
        }

        &.mail:before {
            content: @fa-var-envelope;
        }
        &.addressbook:before {
            content: @fa-var-user;
        }
        &.settings:before {
            content: @fa-var-cog;
        }
        &.help:before {
            content: @fa-var-life-bouy;
        }
        &.logout:before {
            content: @fa-var-power-off;
        }
        &.about:before {
            content: @fa-var-question;
        }
        &.logout:hover {
            color: @taskmenu-logout-button-hover-color;
        }
        &.refresh:before {
            content: @fa-var-refresh;
        }
        &.compose:before {
            content: @fa-var-edit;
        }
    }

    .special-buttons {
        position: absolute;
        bottom: 0;
        left: 0;

        @media screen and (max-width: @screen-width-xs) {
            position: relative;
        }

        a {
            color: @taskmenu-special-button-color;

            &:hover {
                color: @taskmenu-special-button-hover-color;
            }
        }
    }

    .action-buttons {
        a {
            color: @taskmenu-action-button-color;

            &:hover {
                color: @taskmenu-action-button-hover-color;
            }
        }
    }
}