/* 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;
    color: var(--text-color);
}

[type=button].icon-16,
button.icon-16,
.icon-16 {
    height: 24px;
    width: 24px;
    --tile: -24px;
}

[type=button].icon-24,
button.icon-24,
.icon-24 {
    background-image: url('../img/24.svg');
    --tile: -36px;
    height: 36px;
    width: 36px;
}

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-anonymous {
    background-position: calc(var(--tile) * 8) calc(var(--tile) * 7);
}

.icon-back {
    background-position: calc(var(--tile) * 5) calc(var(--tile) * 6);
}

.icon-backup {
    background-position: var(--tile) calc(var(--tile) * 6);
}

.icon-info {
    background-position: calc(var(--tile) * 4) var(--tile);
}

.icon-center {
    background-position: calc(var(--tile) * 4) calc(var(--tile) * 2);
}

.icon-clone {
    background-position: calc(var(--tile) * 7) calc(var(--tile) * 2);
}

.icon-close {
    background-position: var(--tile) 0px;
}

.icon-continue-line {
    background-position: calc(var(--tile) * 4) 0;
}

.icon-copy {
    background-position: calc(var(--tile) * 4) calc(var(--tile) * 7);
}

.icon-delete {
    background-position: calc(var(--tile) * 5) calc(var(--tile) * 2);
}

.icon-delete-shape {
    background-position: calc(var(--tile) * 4) calc(var(--tile) * 3);
}

.icon-delete-vertex {
    background-position: calc(var(--tile) * 5) calc(var(--tile) * 4);
}

.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-draft {
    background-position: calc(var(--tile) * 7) calc(var(--tile) * 7);
}

.icon-drag {
    background-position: calc(var(--tile) * 3) calc(var(--tile) * 3);
    cursor: grab;
    visibility: hidden;
}

.orderable.with-toolbox:hover .icon-drag,
.orderable .with-toolbox:hover .icon-drag {
    visibility: visible;
}

.icon-empty {
    background-position: calc(var(--tile) * 7) calc(var(--tile) * 3);
}

.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-external-link {
    background-position: calc(var(--tile) * 6) calc(var(--tile) * 7);
}

.icon-extract-shape {
    background-position: calc(var(--tile) * 5) 0;
}

.icon-field-Boolean {
    background-position: calc(var(--tile) * 2) calc(var(--tile) * 8);
}

.icon-field-Date {
    background-position: calc(var(--tile) * 5) calc(var(--tile) * 8);
}

.icon-field-Datetime {
    background-position: calc(var(--tile) * 6) calc(var(--tile) * 8);
}

.icon-field-Enum {
    background-position: calc(var(--tile) * 7) calc(var(--tile) * 8);
}

.icon-field-Number {
    background-position: calc(var(--tile) * 3) calc(var(--tile) * 8);
}

.icon-field-String {
    background-position: var(--tile) calc(var(--tile) * 8);
}

.icon-field-Text {
    background-position: 0 calc(var(--tile) * 8);
}

.icon-filters {
    background-position: 0px var(--tile);
}

.icon-filters-empty {
    background-position: calc(var(--tile) * 8) calc(var(--tile) * 8);
}

.icon-folder {
    background-position: calc(var(--tile) * 8) calc(var(--tile) * 5);
}

.icon-forward {
    background-position: calc(var(--tile) * 6) calc(var(--tile) * 6);
}

.icon-help {
    background-position: 0 0;
}

.icon-hole {
    background-position: calc(var(--tile) * 3) calc(var(--tile) * 4);
}

.icon-key {
    background-position: calc(var(--tile) * 6) calc(var(--tile) * 5);
}

.icon-layer {
    background-position: calc(var(--tile) * 8) calc(var(--tile) * 3);
}

.icon-layers {
    background-position: calc(var(--tile) * 4) calc(var(--tile) * 5);
}

.icon-list {
    background-position: var(--tile) calc(var(--tile) * 4);
}

.icon-locate {
    background-position: 0px calc(var(--tile) * 3);
}

.active .icon-locate {
    background-position: calc(var(--tile) * 2) calc(var(--tile) * 4);
}

.icon-magic {
    background-position: calc(var(--tile) * 7) 0;
}

.icon-marker {
    background-position: calc(var(--tile) * 7) var(--tile);
}

.icon-marker-plus {
    background-position: calc(var(--tile) * 8) var(--tile);
}

.icon-merge {
    background-position: calc(var(--tile) * 4) calc(var(--tile) * 4);
}

.icon-mountain {
    background-position: calc(var(--tile) * 8) 0;
}

.icon-multipolygon {
    background-position: calc(var(--tile) * 7) calc(var(--tile) * 5);
}

.icon-multiline {
    background-position: calc(var(--tile) * 7) calc(var(--tile) * 7);
}

.icon-peers {
    background-position: calc(var(--tile) * 3) calc(var(--tile) * 2);
}

.icon-polygon {
    background-position: calc(var(--tile) * 7) calc(var(--tile) * 4);
}

.icon-polygon-plus {
    background-position: calc(var(--tile) * 8) calc(var(--tile) * 4);
}

.icon-polyline {
    background-position: calc(var(--tile) * 7) calc(var(--tile) * 6);
}

.icon-profile {
    background-position: 0 calc(var(--tile) * 4);
}

.icon-print {
    background-position: calc(var(--tile) * 1) calc(var(--tile) * 3);
}

.icon-redo {
    background-position: calc(var(--tile) * 3) calc(var(--tile) * 7);
}

.icon-remote {
    background-position: calc(var(--tile) * 8) calc(var(--tile) * 2);
}

.icon-resize {
    background-position: calc(var(--tile) * 3) calc(var(--tile) * 6);
}

.icon-undo,
.icon-restore {
    background-position: calc(var(--tile) * 2) calc(var(--tile) * 7);
}

.expanded .icon-resize {
    background-position: calc(var(--tile) * 2) calc(var(--tile) * 6);
}

.icon-route {
    background-position: calc(var(--tile) * 8) 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-split-line {
    background-position: calc(var(--tile) * 5) var(--tile);
}

.icon-star {
    background-position: var(--tile) calc(var(--tile) * 7);
}

.icon-starred {
    background-position: 0 calc(var(--tile) * 7);
}

.icon-table {
    background-position: calc(var(--tile) * 2) 0px;
}

details[open] .icon-toggle {
    background-position: calc(var(--tile) * 6) calc(var(--tile) * 2);
}

details:not([open]) .icon-toggle {
    background-position: calc(var(--tile) * 6) calc(var(--tile) * 3);
}


.readonly .icon-table,
.icon-table.off,
.off .icon-table {
    background-position: calc(var(--tile) * 3) 0px;
}

.icon-template {
    background-position: calc(var(--tile) * 5) calc(var(--tile) * 7);
}

.icon-tilelayer {
    background-position: calc(var(--tile) * 4) calc(var(--tile) * 6);
}

.icon-transfer-shape {
    background-position: calc(var(--tile) * 5) calc(var(--tile) * 3);
}

.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);
}
