.nnavigation {

}
.nnavigation-list {
    display: flex;
}

.nnavigation-list__item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    box-sizing: border-box;
    border: 1px solid #0069AB;
    border-radius: 4px;
    color: #0069AB;
    margin: 0 4px;
    text-decoration: none;
    transition: 0.15s;
}

.nnavigation-list__item:first-child {
    margin-left: 0;
}

.nnavigation-list__item--active, .nnavigation-list__item:hover {
    background-color: #0069AB;
    color: #fff;
}

.nnavigation-list__item--dots {
    width: 11px;
    border: 0;
}

.nnavigation-list__item--dots:hover {
    background-color: inherit;
    color: inherit;
}