.icon {
  display: inline-block;
  height: 16px;
  width: 16px;
  background-image: url('../img/sprites.png');
  background-repeat: no-repeat;
}

.button-clear-guides:hover .icon-clear-guides { background-position: -80px 0px; }

.clear-form-button-holder a:hover .icon-clear-guides { background-position: -144px 0px; }

.light-theme {
  .icon-arrow-up { background-position: 0px 0px; }
  .icon-clear-guides { background-position: -16px 0px; }
  .icon-count-column { background-position: -32px 0px; }
  .icon-count-row { background-position: -48px 0px; }

  .icon-check { background-position: 0px -16px; }
  .icon-edit { background-position: -16px -16px; }
  .icon-settings { background-position: -32px -16px; }
  .icon-visibility { background-position: -48px -16px; }

  .icon-margin-top { background-position:   0px -32px; }
  .icon-margin-right { background-position: -16px -32px; }
  .icon-margin-bottom { background-position: -32px -32px; }
  .icon-margin-left { background-position: -48px -32px; }

  .icon-quick-top { background-position:   0px -48px; }
  .icon-quick-right { background-position: -16px -48px; }
  .icon-quick-bottom { background-position: -32px -48px; }
  .icon-quick-left { background-position: -48px -48px; }

  .icon-width-column { background-position:   0px -64px; }
  .icon-width-column-gutter { background-position: -16px -64px; }
  .icon-width-row { background-position: -32px -64px; }
  .icon-width-row-gutter { background-position: -48px -64px; }

  .icon-quick-vertical-midpoint { background-position:   0px -80px; }
  .icon-quick-horizontal-midpoint { background-position: -16px -80px; }
  .icon-set-add { background-position: -32px -80px; }

  .nav-item:hover .icon-settings { background-position: -224px -16px; }
  .header-action:hover .icon-visibility { background-position: -240px -16px; }

  .icon-margin-top:hover,
  .distribute-highlight .icon-margin-top { background-position: -192px -32px; }
  .icon-margin-right:hover,
  .distribute-highlight .icon-margin-right { background-position: -208px -32px; }
  .icon-margin-bottom:hover,
  .distribute-highlight .icon-margin-bottom { background-position: -224px -32px; }
  .icon-margin-left:hover,
  .distribute-highlight .icon-margin-left { background-position: -176px -32px; }
  .icon-count-column:hover,
  .distribute-highlight .icon-count-column { background-position: -224px 0px; }
  .icon-count-row:hover,
  .distribute-highlight .icon-count-row { background-position: -176px 0px; }
  .icon-width-column:hover,
  .distribute-highlight .icon-width-column { background-position:   -192px -64px; }
  .icon-width-column-gutter:hover,
  .distribute-highlight .icon-width-column-gutter { background-position: -208px -64px; }
  .icon-width-row:hover,
  .distribute-highlight .icon-width-row { background-position: -224px -64px; }
  .icon-width-row-gutter:hover,
  .distribute-highlight .icon-width-row-gutter { background-position: -176px -64px; }
}

.dark-theme {
  .icon-arrow-up { background-position: -64px 0px; }
  .icon-clear-guides { background-position: -80px 0px; }
  .icon-count-column { background-position: -96px 0px; }
  .icon-count-row { background-position: -112px 0px; }

  .icon-check { background-position: -64px -16px; }
  .icon-edit { background-position: -80px -16px; }
  .icon-settings { background-position: -96px -16px; }
  .icon-visibility { background-position: -112px -16px; }

  .icon-margin-top { background-position:   -64px -32px; }
  .icon-margin-right { background-position: -80px -32px; }
  .icon-margin-bottom { background-position: -96px -32px; }
  .icon-margin-left { background-position: -112px -32px; }

  .icon-quick-top { background-position:   -64px -48px; }
  .icon-quick-right { background-position: -80px -48px; }
  .icon-quick-bottom { background-position: -96px -48px; }
  .icon-quick-left { background-position: -112px -48px; }

  .icon-width-column { background-position:   -64px -64px; }
  .icon-width-column-gutter { background-position: -80px -64px; }
  .icon-width-row { background-position: -96px -64px; }
  .icon-width-row-gutter { background-position: -112px -64px; }

  .icon-quick-vertical-midpoint { background-position:   -64px -80px; }
  .icon-quick-horizontal-midpoint { background-position: -80px -80px; }
  .icon-set-add { background-position: -96px -80px; }

  .nav-item:hover .icon-settings { background-position: -160px -16px; }
  .header-action:hover .icon-visibility { background-position: -176px -16px; }

  .icon-margin-top:hover,
  .distribute-highlight .icon-margin-top { background-position: -128px -32px; }
  .icon-margin-right:hover,
  .distribute-highlight .icon-margin-right { background-position: -144px -32px; }
  .icon-margin-bottom:hover,
  .distribute-highlight .icon-margin-bottom { background-position: -160px -32px; }
  .icon-margin-left:hover,
  .distribute-highlight .icon-margin-left { background-position: -176px -32px; }
  .icon-count-column:hover,
  .distribute-highlight .icon-count-column { background-position: -160px 0px; }
  .icon-count-row:hover,
  .distribute-highlight .icon-count-row { background-position: -176px 0px; }
  .icon-width-column:hover,
  .distribute-highlight .icon-width-column { background-position:   -128px -64px; }
  .icon-width-column-gutter:hover,
  .distribute-highlight .icon-width-column-gutter { background-position: -144px -64px; }
  .icon-width-row:hover,
  .distribute-highlight .icon-width-row { background-position: -160px -64px; }
  .icon-width-row-gutter:hover,
  .distribute-highlight .icon-width-row-gutter { background-position: -176px -64px; }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dppx) {
  .icon {
    background-image: url('../img/sprites@2x.png');
    background-size: 256px 96px;
  }
}
