.svg-button svg {
    position: absolute;
    left: -1px;
    top: -1px;
    width: 30px;
    height: 30px;
    z-index: 10;
}

.svg-button .svg-click-area,
.svg-tool .svg-click-area {
    position: absolute;
    left: -1px;
    top: -1px;
    right: -1px;
    bottom: -1px;
    z-index: 11;
    background-color: transparent;
    background-image: none;
}

.svg-tool svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    z-index: 10;
}

.svg-tool {
    position: relative;
    cursor: pointer;
}

/* unfortunatyle we need a strong selector to override default behaviour.
this can be removed when we stop supporting png sprites */
#wrapper .olControlPanel .svg-tool,
div.olControlZoom a.svg-tool {
    background-image: none !important;
}

div.olControlZoom a.svg-tool {
    text-indent: 0;
}

/** Explicitly set the height of the component. When positioning the component the SVG might not be loaded,
    and height would be 0, making it dissapear from the screen when positioned in the bottom-right */
div.olControlZoom {
    width: 28px;
    height: 51px;
}

div.olControlZoom a.svg-tool svg {
    width: 22px;
    height: 22px;
}

.svg-icon-header svg {
    width: 20px;
    height: 20px;
    margin-left: -2px;
    margin-top: -2px;
}

.svg-button svg *,
.svg-tool svg *,
.svg-icon-header svg * {
    fill: #777777; /* primary color */
    stroke: #777777; /* primary color */
    color: #D8D8D8; /* secondary color, trick to have 2 colors in SVG using currentColor */
    transition: fill .3s, stroke .3s, color .3s;
}

.no-touch .svg-button:hover,
.no-touch .svg-button.buttonDefaultClass_hover {
    background-color: #F1F1F1 !important;
}

.no-touch .svg-button:hover svg *,
.no-touch .svg-tool:hover svg * {
    fill: #4A4A4A;
    stroke: #4A4A4A;
}

.svg-tool.svg-tool-active svg *,
.svg-button.buttonDefaultClass_click svg * {
    fill: #333333;
    stroke: #333333;
}