$icons: (
  '2Do',
  'AirDrop',
  'AirplaneMode',
  'AppStore',
  'ApplePay',
  'Apps',
  'Associate',
  'Battery',
  'Bear',
  'BlindSquare',
  'Blink',
  'Bluetooth',
  'Books',
  'Box',
  'Brightness',
  'Bursts',
  'Calculator',
  'Camera',
  'Captio',
  'CellularData',
  'Chrome',
  'Clear',
  'Clipboard',
  'Clock',
  'CloudApp',
  'Contacts',
  'ContactsCategory',
  'Date',
  'DayOne',
  'Dictation',
  'Dictionary',
  'DoNotDisturb',
  'Documents',
  'DownloadArticle',
  'Downloads',
  'Drafts',
  'Due',
  'Editorial',
  'Evernote',
  'FaceTime',
  'Facebook',
  'Fantastical',
  'FastForward',
  'Flashlight',
  'GIF',
  'Giphy',
  'GoodReader',
  'Graph',
  'HandoffAction',
  'Health',
  'HealthCategory',
  'Home',
  'Image',
  'Imgur',
  'Instagram',
  'Instapaper',
  'Lightroom',
  'LivePhotos',
  'Location',
  'Mail',
  'Maps',
  'Markup',
  'Messages',
  'Microphone',
  'Music',
  'MusicCategory',
  'Network',
  'Notes',
  'Notification',
  'OmniFocus',
  'Opener',
  'Overcast',
  'PDF',
  'Pause',
  'Phone',
  'PhoneNumber',
  'Photos',
  'Pinboard',
  'Placeholder',
  'Pocket',
  'Print',
  'Pythonista',
  'QRCode',
  'QuickLook',
  'QuickTime',
  'RSS',
  'Reminders',
  'Rewind',
  'RichText',
  'Safari',
  'Scripting',
  'ScriptingCategory',
  'Sharing',
  'Shortcuts',
  'Skype',
  'Smiley',
  'Sound',
  'SpeechRecognition',
  'Tally',
  'Text',
  'TheHitList',
  'Things',
  'Todoist',
  'Translate',
  'Trello',
  'Tumblr',
  'Tweetbot',
  'Twitter',
  'URL',
  'Ulysses',
  'Variable',
  'Videos',
  'Weather',
  'Web',
  'WhatsApp',
  'Wi-Fi',
  'WordPress',
  'Wunderlist',
  'iTranslate',
  'iTunes',
  'ShortcutExtension',
  'iCloud',
  'Dropbox'
);

$retina: (
    min-resolution: 192dpi,
  ),
  (-webkit-min-device-pixel-ratio: 2);

@function sized($length) {
  @return calc(#{$length / 29px} * var(--size));
}

.icon {
  --size: 29px;

  width: var(--size);
  height: var(--size);

  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;

  @for $i from 1 through length($icons) {
    &.i-#{$i - 1} {
      background-image: url('./icons/#{nth($icons, $i)}@2x.png');
      background-size: 100% 100%;
    }
  }

  &.i-calendar {
    background: #ffffff;
    border-radius: sized(6.5px);
    padding: sized(4px) 0;
    box-shadow: inset 1px 0 #e5e5e5, inset 0 1px #e5e5e5, inset -1px 0 #e5e5e5,
      inset 0 -1px #e5e5e5;
    @media #{$retina} {
      box-shadow: inset 0.5px 0 #e5e5e5, inset 0 0.5px #e5e5e5,
        inset -0.5px 0 #e5e5e5, inset 0 -0.5px #e5e5e5;
    }

    span {
      display: block;
      width: 100%;
      text-align: center;
    }

    span:first-child {
      height: sized(5px);
      line-height: sized(5px);
      font-size: sized(5px);
      color: red;
      overflow: hidden;
    }

    span:last-child {
      line-height: sized(16px);
      font-weight: 100;
      font-size: sized(18px);
      color: black;
    }
  }
}