@font-face {
  font-family: $typeface-travlr-icon;
  src:  url('#{$font-icons-path}TRAVLR.eot');
  src:  url('#{$font-icons-path}TRAVLR.eot') format('embedded-opentype'),
    url('#{$font-icons-path}TRAVLR.eot') format('eot'),
    url('#{$font-icons-path}TRAVLR.ttf') format('truetype'),
    url('#{$font-icons-path}TRAVLR.woff') format('woff'),
    url('#{$font-icons-path}TRAVLR.woff2') format('woff2'),
    url('#{$font-icons-path}TRAVLR.svg') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.#{$travlr-ui} {

  .#{$travlr-prefix} {

    /*------------------------
      base class definition
    -------------------------*/
    &icon {
      display: inline-block;
      font: normal normal normal 24px/1 'TRAVLR';
      text-rendering: auto;
      /* Better Font Rendering */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;

      &.icon {
        /*------------------------
          change icon size
        -------------------------*/

        /* relative units */
        &-small {
          font-size: 20px;
        }
        &-large {
          font-size: 32px;
        }

        /* absolute units */
        &-16 {
          font-size: 16px;
        }
        &-32 {
          font-size: 32px;
        }
        &-inline {
          position: relative;
          top: 6px;
        }


        /*----------------------------------
          add a square/circle background
        -----------------------------------*/

        &-bg-square,
        &-bg-circle {
          padding: 0.35em;
          background-color: $icon-background-color;
        }

        &-bg-circle {
          border-radius: 50%;
        }
      }

      /*------------------------
        spinning icons
      -------------------------*/

      &-is-spinning {
        -webkit-animation: icon-spin 2s infinite linear;
        -moz-animation: icon-spin 2s infinite linear;
        animation: icon-spin 2s infinite linear;
      }

      /*------------------------
        rotated/flipped icons
      -------------------------*/

      &-rotate-90  {
        @include icon-rotate(90deg, 1);
      }

      &-rotate-180 {
        @include icon-rotate(180deg, 2);
      }

      &-rotate-270 {
        @include icon-rotate(270deg, 3);
      }

      &-flip-y {
        @include icon-flip(-1, 1, 0);
      }
      &-flip-x {
        @include icon-flip(1, -1, 2);
      }

      /*------------------------------------
        use icons as list item markers
      -------------------------------------*/

      &-group {
        padding-left: 0;
        list-style-type: none;

        & > li {
          display: inline-block;
          line-height: 1.4;
        }

        & > li > .icon {
          margin-right: $icon-li-margin-right;
          line-height: inherit;
        }
      }

    }

  }

}

/*------------------------
	Helpers
-------------------------*/
@function unicode($str) {
  @return unquote("\"\\#{$str}\"");
}

@each $name, $icon in $list-icons {
  @include create-icon($name, $icon);
}