.header-button {
    background: none;
    border: 0 none;
    color: #3b1544;
    font-family: inherit;
    font-weight: 300;
    text-decoration: underline;
    position: relative;
    cursor: pointer;
    transition: .3s color;
}

.header-button--account {
    text-decoration: none;
}

.header-button:hover {
    color: #669685;
}

.header-button__username {
    display: inline-block;
    text-decoration: underline;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: text-top;
    margin-right: -3px;
}

.header-button__dropdown {
    display: none;
    position: absolute;
    top: 22px;
    z-index: 10;
    background: #fff;
    box-shadow: 0 1px 25px 0 rgb(0 0 0 / 15%);
    padding: 4px 2px;
}

.header-button__dropdown li {
    display: block!important;
}

.header-button__dropdown--account {
    right: 0px;
    /* width: 150px; */
    text-align: left;
    padding: 7px;
}

.header-button__dropdown a,
.header-button__dropdown a:visited {
    text-decoration: none;
    font-size: 13px;
    /* text-decoration: underline; */
    padding: 1px 8px;
    display: block;
}

.header-button__dropdown--active {
    display: block;
}

@media (min-width: 768px) {
    .header-button__dropdown a {
        font-size: 15px;
    }

    .header-button__dropdown {
        position: absolute;
        top: 22px;
    }
}