@import 'xtend-library/src/core/icon/_icon.less';

/**
 * vars
 */

// generate class: [false], [true] non responsive only, [sm, md, lg] responsive @breakpoints

@generate-icon: true;

// size

@icon-micro: .125em;
@icon-mini: .25em;
@icon-tiny: .5em;
@icon-small: .75em;
@icon-medium: 1em;
@icon-large: 1.25em;
@icon-big: 1.5em;
@icon-giant: 2em;
@icon-huge: 2.5em;

/**
 * icon
 */

// size

.icon-micro {
  font-size: @icon-micro;
  img& {
    width: auto;
    height: @icon-micro;
  }
  // make same height as 1em
  vertical-align: middle;
  margin-top: calc((1em - @icon-micro) / 2);
  margin-bottom: calc((1em - @icon-micro) / 2);
}

.icon-mini {
  font-size: @icon-mini;
  img& {
    width: auto;
    height: @icon-mini;
  }
  // make same height as 1em
  vertical-align: middle;
  margin-top: calc((1em - @icon-mini) / 2);
  margin-bottom: calc((1em - @icon-mini) / 2);
}

.icon-tiny {
  font-size: @icon-tiny;
  img& {
    width: auto;
    height: @icon-tiny;
  }
  // make same height as 1em
  vertical-align: middle;
  margin-top: calc((1em - @icon-tiny) / 2);
  margin-bottom: calc((1em - @icon-tiny) / 2);
}

.icon-small {
  font-size: @icon-small;
  img& {
    width: auto;
    height: @icon-small;
  }
  // make same height as 1em
  vertical-align: middle;
  margin-top: calc((1em - @icon-small) / 2);
  margin-bottom: calc((1em - @icon-small) / 2);
}

.icon-medium {
  font-size: @icon-medium;
  img& {
    width: auto;
    height: @icon-medium;
  }
  // make same height as 1em
  vertical-align: middle;
  margin-top: calc((1em - @icon-medium) / 2);
  margin-bottom: calc((1em - @icon-medium) / 2);
}

.icon-large {
  font-size: @icon-large;
  img& {
    width: auto;
    height: @icon-large;
  }
  // make same height as 1em
  vertical-align: middle;
  margin-top: calc((1em - @icon-large) / 2);
  margin-bottom: calc((1em - @icon-large) / 2);
}

.icon-big {
  font-size: @icon-big;
  img& {
    width: auto;
    height: @icon-big;
  }
  // make same height as 1em
  vertical-align: middle;
  margin-top: calc((1em - @icon-big) / 2);
  margin-bottom: calc((1em - @icon-big) / 2);
}

.icon-giant {
  font-size: @icon-giant;
  img& {
    width: auto;
    height: @icon-giant;
  }
  // make same height as 1em
  vertical-align: middle;
  margin-top: calc((1em - @icon-giant) / 2);
  margin-bottom: calc((1em - @icon-giant) / 2);
}

.icon-huge {
  font-size: @icon-huge;
  img& {
    width: auto;
    height: @icon-huge;
  }
  // make same height as 1em
  vertical-align: middle;
  margin-top: calc((1em - @icon-huge) / 2);
  margin-bottom: calc((1em - @icon-huge) / 2);
}

// space

.icon-left {
  .margin(right, .75rem);
}

.icon-right {
  .margin(left, .75rem);
}

/**
 * icons xt (fonts)
 */

// font-face

@icons-xt-family: 'xtend';
@icons-xt-path: 'icons/xtend';

@font-face {
  font-family: @icons-xt-family;
  src: url('@{icons-xt-path}.ttf') format('truetype'), url('@{icons-xt-path}.woff2') format('woff2'), url('@{icons-xt-path}.woff') format('woff'), url('@{icons-xt-path}.svg#xtend') format('svg');
  font-weight: normal;
  font-style: normal;
}

// icons
// USAGE LESS: .icon-xt(@content: @icon-xt-close, @size: @icon-small, @position: after);
// USAGE MARKUP: <span class="icon-xt-close"></span>

@icons-xt: close, chevron-down, chevron-left, chevron-right, chevron-up, check, circle, search, locate;

@icon-xt-chevron-down: '\e900';
@icon-xt-chevron-left: '\e901';
@icon-xt-chevron-right: '\e902';
@icon-xt-chevron-up: '\e903';
@icon-xt-close: '\e904';
@icon-xt-check: '\e905';
@icon-xt-circle: '\e906';
@icon-xt-search: '\e907';
@icon-xt-locate: '\e908';

/**
 * icons theme (fonts)
 */

/*
// font-face

@icons-theme--family: 'luma-icons';
@icons-theme--path: '../icons-theme/theme';

@font-face {
  font-family: @icons-theme--family;
  src: url('@{icons-theme--path}.eot');
  src: url('@{icons-theme--path}.eot?#iefix') format('embedded-opentype'), url('@{icons-theme--path}.woff2') format('woff2'), url('@{icons-theme--path}.woff') format('woff'), url('@{icons-theme--path}.ttf') format('truetype'), url('@{icons-theme--path}.svg#@{icons-theme--family}') format('svg');
  font-weight: normal;
  font-style: normal;
}

// icons
// USAGE LESS: .icon(@content: @icon-theme-menu, @size: @icon-small, @position: after);
// USAGE MARKUP: <span class="icon-theme-menu"></span>

@icons-theme: menu, search; // this will generate classes .icon-theme-{name}

@icon-theme-menu: '\e609';
@icon-theme-search: '\e615';
*/

/**
 * icons theme (icomoon, etc..)
 */

[class^='icon-'], [class*=' icon-'] {
  vertical-align: middle;
}