/* Applied on i and button elements  */
.icon {
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    /* Reset default style, in case we apply this class on a button element  */
    border: none;
    background-color: initial;
}
.icon-16 {
    height: 24px;
    line-height: 24px;
    width: 24px;
    --tile: -24px;
}
.icon-24 {
    background-image: url('../img/24.svg');
    --tile: -36px;
    height: 36px;
    line-height: 36px;
    width: 36px;
}
.icon + span {
    margin-inline-start: 10px;
}
html[dir="rtl"] .icon {
  transform: scaleX(-1);
}
.icon-block {
    display: block;
    float: inline-start;
    margin-inline-end: 10px;
}
.icon-block + span {
    margin-inline-start: 0;
}
.icon-16.icon-white,
.dark .icon-16 {
    background-image: url('../img/16-white.svg');
}
.icon-24.icon-white,
.dark .icon-24 {
    background-image: url('../img/24-white.svg');
}
.icon-16.icon-black,
.icon-16 {
    background-image: url('../img/16.svg');
}
.icon-24.icon-black,
.icon-24 {
    background-image: url('../img/24.svg');
}
.icon-add {
    background-position: var(--tile) var(--tile);
}
.icon-back {
    background-position: calc(var(--tile) * 5) calc(var(--tile) * 6);
}
.icon-backup {
    background-position: var(--tile) calc(var(--tile) * 6);
}
.icon-caption {
    background-position: calc(var(--tile) * 4) var(--tile);
}
.icon-close {
    background-position: var(--tile) 0px;
}
.icon-copy {
    background-position: calc(var(--tile) * 2) calc(var(--tile) * 4);
}
.icon-delete {
    background-position: calc(var(--tile) * 5) calc(var(--tile) * 2);
}
.readonly .icon-delete,
.off .icon-delete {
    background-position: calc(var(--tile) * 5) calc(var(--tile) * 5);
}
.icon-download {
    background-position: 0 calc(var(--tile) * 6);
}
.icon-drag {
    background-position: calc(var(--tile) * 3) calc(var(--tile) * 3);
    cursor: move;
    float: inline-end;
}
.icon-eye {
    background-position: calc(var(--tile) * 2) var(--tile);
}
.off .icon-eye {
    background-position: calc(var(--tile) * 3) var(--tile);
}
.icon-edit {
    background-position: calc(var(--tile) * 2) calc(var(--tile) * 2);
}
.off .icon-edit {
    background-position: calc(var(--tile) * 2) calc(var(--tile) * 3);
}
.icon-filters {
    background-position: 0px var(--tile);
}
.icon-forward {
    background-position: calc(var(--tile) * 6) calc(var(--tile) * 6);
}
.icon-key {
    background-position: calc(var(--tile) * 6) calc(var(--tile) * 5);
}
.icon-layers {
    background-position: calc(var(--tile) * 4) calc(var(--tile) * 5);
}
.icon-list {
    background-position: var(--tile) calc(var(--tile) * 4);
}
.icon-magic {
    background-position: calc(var(--tile) * 7) 0;
}
.icon-marker {
    background-position: calc(var(--tile) * 3) calc(var(--tile) * 5);
}
.icon-peers {
    background-position: calc(var(--tile) * 3) calc(var(--tile) * 2);
}
.icon-polygon {
    background-position: var(--tile) calc(var(--tile) * 3);
}
.icon-polyline {
    background-position: 0 calc(var(--tile) * 3);
}
.icon-profile {
    background-position: 0 calc(var(--tile) * 4);
}
.icon-resize {
    background-position: calc(var(--tile) * 3) calc(var(--tile) * 6);
}
.icon-restore {
    background-position: calc(var(--tile) * 5) calc(var(--tile) * 3);
}
.expanded .icon-resize {
    background-position: calc(var(--tile) * 2) calc(var(--tile) * 6);
}
.icon-save {
    background-position: calc(var(--tile) * 6) var(--tile);
}
/* FIXME move to a 16-disabled.svg sprite ? */
.icon-save-disabled {
    background-position: calc(var(--tile) * 6) 0;
}
.icon-search {
    background-position: var(--tile) calc(var(--tile) * 5);
}
.icon-settings {
    background-position: var(--tile) calc(var(--tile) * 4);
}
.icon-share {
    background-position: 0px calc(var(--tile) * 5);
}
.icon-table {
    background-position: calc(var(--tile) * 2) 0px;
}
.readonly .icon-table,
.off .icon-table {
    background-position: calc(var(--tile) * 3) 0px;
}
.remotelayer .icon-table {
    display: none !important;
}
.icon-tilelayer {
    background-position: calc(var(--tile) * 4) calc(var(--tile) * 6);
}
.icon-upload {
    background-position: calc(var(--tile) * 6) calc(var(--tile) * 4);
}
.icon-zoom {
    background-position: 0px calc(var(--tile) * 2);
}
.off .icon-zoom {
    background-position: var(--tile) calc(var(--tile) * 2);
}