@value colors: '../../common-ui/colors.css';
@value color12 from colors;

.inbox {
    composes: inboxIcon from '../../common-ui/icons.css';
    composes: nakedSquareButton from '../../common-ui/elements.css';
    height: 25px;
    width: 25px;
    display: flex;
    padding: 5px;
    background-size: 19px;
    margin-left: 10px;
    cursor: pointer;

    @media (max-width: 700px) {
        display: none;
    }
}

.inboxCount {
    color: #fff;
    background-color: color12;
    border-radius: 3px;
    padding: 1px 5px;
    position: absolute;
    width: fit-content;
    font-size: 13px;
    margin-top: 7px;
    margin-left: 15px;
}

.activeInbox {
    composes: nakedSquareButton from '../../common-ui/elements.css';
    composes: inboxIconFull from '../../common-ui/icons.css';
    height: 25px;
    width: 25px;
    display: flex;
    padding: 5px;
    background-size: 19px;

    &.inboxIcon {
        display: none;
    }
}

.inboxIcon {
    composes: inboxIcon from '../../common-ui/icons.css';
    composes: nakedSquareButton from '../../common-ui/elements.css';
    height: 25px;
    width: 25px;
    display: flex;
    padding: 5px;
    background-size: 19px;
}
