.dg-control-round {
    position: relative;
    padding: 5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: default;
}

.dg-control-round__icon {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f0f0f0; // 94%, fallback
    background-image: linear-gradient(to bottom, #fff 0, hsl(0, 0%, 88%) 100%);
    color: #2b2a29;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    font-size: 22px;
    line-height: 30px;
    cursor: pointer;

    .no-touch &:hover {
        background-color: #f5f5f5; // 96%, fallback
        background-image: linear-gradient(to bottom, hsl(0, 0%, 92%) 0, #fff 100%);
    }

    &:active,
    .no-touch &:active,
    &_state_active {
        background-color: #ebebeb; // 92%, fallback
        background-image: linear-gradient(to bottom, hsl(0, 0%, 84%) 0, #fff 100%);
    }

    .leaflet-disabled &,
    .no-touch .leaflet-disabled &:hover,
    .leaflet-disabled &:active {
        background-image: none;
        cursor: default;
    }

    .leaflet-touch &:before {
        position: absolute;
        top: -10px;
        right: -15px;
        bottom: -10px;
        left: -15px;
        content: '';
    }
}

.dg-control-round_is-hidden_true {
    display: none;
}