/* FONT FILES & FAMILY
-------------------------------------------------*/

@font-face {
  font-family: 'squarespace-ui-font';
  src:url('//assets.squarespace.com/universal/fonts/squarespace-ui-font.eot');
  src:url('//assets.squarespace.com/universal/fonts/squarespace-ui-font.eot?#iefix') format('embedded-opentype'),
      url('//assets.squarespace.com/universal/fonts/squarespace-ui-font.svg#squarespace-ui-font') format('svg'),
      url('//assets.squarespace.com/universal/fonts/squarespace-ui-font.woff') format('woff'),
      url('//assets.squarespace.com/universal/fonts/squarespace-ui-font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.sqs-ui-font-family {
  font-family: 'squarespace-ui-font';
  font-style: normal;
  speak: none;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

/* FONT SIZE
-------------------------------------------------*/

.sqs-ui-font-size(@size, @fontSize, @mode: before) when (@mode = before) {
  &:before {
    font-size: @fontSize;
    width: @size;
    height: @size;
    line-height: @size;
  }
}

.sqs-ui-font-size(@size, @fontSize, @mode: before) when (@mode = after) {
  &:after {
    font-size: @fontSize;
    width: @size;
    height: @size;
    line-height: @size;
  }
}

/* USE FONT VIA A CLASSNAME
-------------------------------------------------*/

[class^="sqs-ui-font-"]:before,
[class*=" sqs-ui-font-"]:before {
  .sqs-ui-font-family;
}

/* USE FONT VIA [data-icon]
-------------------------------------------------*/

[data-icon]:before {
  .sqs-ui-font-family;
  content: attr(data-icon);
}

/* INJECT FONT AS A MIXIN
-------------------------------------------------*/

.sqs-ui-font-define(@content, @mode, @size: 16px) when (@mode = before) {
  &:before {
    .sqs-ui-font-family;
    content: @content;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
  }

  .sqs-ui-font-size(@size, @size, @mode);
}

.sqs-ui-font-define(@content, @mode, @size: 16px) when (@mode = after) {
  &:after {
    .sqs-ui-font-family;
    content: @content;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
  }

  .sqs-ui-font-size(@size, @size, @mode);
}


.sqs-ui-font(left-arrow, @mode: before)                               { .sqs-ui-font-define("\e000", @mode); }
.sqs-ui-font(left-arrow-2, @mode: before)                             { .sqs-ui-font-define("\e001", @mode); }
.sqs-ui-font(left-arrow-3, @mode: before)                             { .sqs-ui-font-define("\e002", @mode); }

.sqs-ui-font(right-arrow, @mode: before)                              { .sqs-ui-font-define("\e003", @mode); }
.sqs-ui-font(right-arrow-2, @mode: before)                            { .sqs-ui-font-define("\e004", @mode); }
.sqs-ui-font(right-arrow-3, @mode: before)                            { .sqs-ui-font-define("\e005", @mode); }

.sqs-ui-font(up-arrow, @mode: before)                                 { .sqs-ui-font-define("\e006", @mode); }
.sqs-ui-font(up-arrow-2, @mode: before)                               { .sqs-ui-font-define("\e007", @mode); }
.sqs-ui-font(up-arrow-3, @mode: before)                               { .sqs-ui-font-define("\e008", @mode); }

.sqs-ui-font(down-arrow, @mode: before)                               { .sqs-ui-font-define("\e009", @mode); }
.sqs-ui-font(down-arrow-2, @mode: before)                             { .sqs-ui-font-define("\e00a", @mode); }
.sqs-ui-font(down-arrow-3, @mode: before)                             { .sqs-ui-font-define("\e00b", @mode); }

.sqs-ui-font(bookmark, @mode: before)                                 { .sqs-ui-font-define("\e020", @mode); }

.sqs-ui-font(clock, @mode: before)                                    { .sqs-ui-font-define("\e00c", @mode); }
.sqs-ui-font(clock-2, @mode: before)                                  { .sqs-ui-font-define("\e00d", @mode); }

.sqs-ui-font(tag, @mode: before)                                      { .sqs-ui-font-define("\e00e", @mode); }
.sqs-ui-font(tag-2, @mode: before)                                    { .sqs-ui-font-define("\e00f", @mode); }

.sqs-ui-font(bubble, @mode: before)                                   { .sqs-ui-font-define("\e010", @mode); }
.sqs-ui-font(bubble-2, @mode: before)                                 { .sqs-ui-font-define("\e011", @mode); }

.sqs-ui-font(compass, @mode: before)                                  { .sqs-ui-font-define("\e01d", @mode); }

.sqs-ui-font(heart, @mode: before)                                    { .sqs-ui-font-define("\e013", @mode); }
.sqs-ui-font(heart-2, @mode: before)                                  { .sqs-ui-font-define("\e012", @mode); }

.sqs-ui-font(grid, @mode: before)                                     { .sqs-ui-font-define("\e014", @mode, 32px); }

.sqs-ui-font(info, @mode: before)                                     { .sqs-ui-font-define("\e021", @mode); }
.sqs-ui-font(info-2, @mode: before)                                   { .sqs-ui-font-define("\e017", @mode); }

.sqs-ui-font(external-link, @mode: before)                            { .sqs-ui-font-define("\e016", @mode); }
.sqs-ui-font(calendar, @mode: before)                                 { .sqs-ui-font-define("\e015", @mode); }
.sqs-ui-font(map-marker, @mode: before)                               { .sqs-ui-font-define("\e02f", @mode); }
.sqs-ui-font(eye, @mode: before)                                      { .sqs-ui-font-define("\e01b", @mode); }

.sqs-ui-font(cross, @mode: before)                                    { .sqs-ui-font-define("\e01a", @mode); }
.sqs-ui-font(cross-2, @mode: before)                                  { .sqs-ui-font-define("\e018", @mode); }

.sqs-ui-font(checkmark, @mode: before)                                { .sqs-ui-font-define("\e019", @mode); }

.sqs-ui-font(book, @mode: before)                                     { .sqs-ui-font-define("\e01e", @mode); }
.sqs-ui-font(document, @mode: before)                                 { .sqs-ui-font-define("\e01c", @mode); }
.sqs-ui-font(creative-commons, @mode: before)                         { .sqs-ui-font-define("\e01f", @mode); }

.sqs-ui-font(list, @mode: before)                                     { .sqs-ui-font-define("\e029", @mode); }
.sqs-ui-font(list-2, @mode: before)                                   { .sqs-ui-font-define("\e02a", @mode); }

.sqs-ui-font(rss, @mode: before)                                      { .sqs-ui-font-define("\e022", @mode); }
.sqs-ui-font(share, @mode: before)                                    { .sqs-ui-font-define("\e02b", @mode); }
.sqs-ui-font(plus, @mode: before)                                     { .sqs-ui-font-define("\e024", @mode); }
.sqs-ui-font(minus, @mode: before)                                    { .sqs-ui-font-define("\e025", @mode); }

.sqs-ui-font(folder, @mode: before)                                   { .sqs-ui-font-define("\e028", @mode); }
.sqs-ui-font(folder-2, @mode: before)                                 { .sqs-ui-font-define("\e027", @mode); }

.sqs-ui-font(export, @mode: before)                                   { .sqs-ui-font-define("\e026", @mode); }

.sqs-ui-font(left, @mode: before)                                     { .sqs-ui-font-define("\e02c", @mode, 32px); }
.sqs-ui-font(right, @mode: before)                                    { .sqs-ui-font-define("\e02d", @mode, 32px); }

.sqs-ui-font(close, @mode: before)                                    { .sqs-ui-font-define("\e02e", @mode, 32px); }
.sqs-ui-font(menu, @mode: before)                                     { .sqs-ui-font-define("\e030", @mode, 32px); }
.sqs-ui-font(pagination-marker, @mode: before)                        { .sqs-ui-font-define("\e031", @mode, 32px); }

.sqs-ui-font(resize-full, @mode: before)                              { .sqs-ui-font-define("\f065", @mode); }
.sqs-ui-font(resize-small, @mode: before)                             { .sqs-ui-font-define("\f066", @mode); }

/* Fallback */
.sqs-ui-font(@_) { }
.sqs-ui-font(@_, @_) { }