/* icons.css
   Utility classes to use SVG icons placed in wwwroot/icon/
   Usage examples:
     <span class="icon icon-download icon--md"></span>
     <i class="icon icon-user icon--sm"></i>
*/

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
}

/* size helpers */
.icon--sm { width: 16px; height: 16px; }
.icon--md { width: 20px; height: 20px; }
.icon--lg { width: 26px; height: 26px; }

/* per-icon classes (file names under wwwroot/icon/) */
.icon-achievement { background-image: url('/icon/achievement_icon.svg'); }
.icon-arrow-down { background-image: url('/icon/arrow_down_icon.svg'); }
.icon-bell { background-image: url('/icon/bell_icon.svg'); }
.icon-book { background-image: url('/icon/book_icon.svg'); }
.icon-calendar { background-image: url('/icon/calendar_icon.svg'); }
.icon-certificate { background-image: url('/icon/certificate_icon.svg'); }
.icon-chat { background-image: url('/icon/chat_bubble_icon.svg'); }
.icon-chat-icon { background-image: url('/icon/chat_icon.svg'); }
.icon-check-mark { background-image: url('/icon/check_mark_icon.svg'); }
.icon-circle-checkbox-checked { background-image: url('/icon/circle_checkbox_checked_icon.svg'); }
.icon-circle-checkbox { background-image: url('/icon/circle_checkbox_icon.svg'); }
.icon-clock { background-image: url('/icon/clock_icon.svg'); }
.icon-cloud-upload { background-image: url('/icon/cloud_upload_icon.svg'); }
.icon-course { background-image: url('/icon/course_icon.svg'); }
.icon-download { background-image: url('/icon/download_icon.svg'); }
.icon-eye { background-image: url('/icon/eye_icon.svg'); }
.icon-farvorite { background-image: url('/icon/farvorite_icon.svg'); }
.icon-favorite { background-image: url('/icon/farvorite_icon.svg'); }
.icon-heart { background-image: url('/icon/heart_icon.svg'); }
.icon-heart-filled { background-image: url('/icon/heart_icon_filled.svg'); }
.icon-file { background-image: url('/icon/file_icon.svg'); }
.icon-folder { background-image: url('/icon/folder_icon.svg'); }
.icon-gold-star { background-image: url('/icon/gold_star_icon.svg'); }
.icon-home { background-image: url('/icon/home_icon.svg'); }
.icon-image { background-image: url('/icon/image_icon.svg'); }
.icon-lession { background-image: url('/icon/lession_icon.svg'); }
.icon-lesson { background-image: url('/icon/lession_icon.svg'); }
.icon-link { background-image: url('/icon/link_icon.svg'); }
.icon-lock { background-image: url('/icon/lock_icon.svg'); }
.icon-plus { background-image: url('/icon/plus_icon.svg'); }
.icon-ratting { background-image: url('/icon/ratting_icon.svg'); }
.icon-rating { background-image: url('/icon/ratting_icon.svg'); }
.icon-reload { background-image: url('/icon/reload_icon.svg'); }
.icon-search { background-image: url('/icon/search_icon.svg'); }
.icon-setting { background-image: url('/icon/setting_icon.svg'); }
.icon-sort { background-image: url('/icon/sort_icon.svg'); }
.icon-start { background-image: url('/icon/start_icon.svg'); }
.icon-timer { background-image: url('/icon/timer_icon.svg'); }
.icon-trash { background-image: url('/icon/trash_can_icon.svg'); }
.icon-trash-no-bg { background-image: url('/icon/trash_can_icon_no_bg.svg'); }
.icon-user { background-image: url('/icon/user_icon.svg'); }
.icon-x { background-image: url('/icon/x_icon.svg'); }
.icon-arrow-right { background-image: url('/icon/arrow_right_icon.svg'); }

/*
  Mask-based icons: add the `icon--mask` modifier together with the icon class
  to make the icon colorable via `color` (uses the SVG as a mask and fills with
  `currentColor`). Example:

    <span class="icon icon-download icon--md icon--mask text-primary"></span>

  Note: when using `icon--mask` the icon file is used as a mask so it will
  inherit the element's `color`.
*/
.icon--mask {
  background-color: currentColor;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  background-repeat: no-repeat;
}

/* per-icon mask mappings (use together with `icon--mask`) */
.icon--mask.icon-achievement { -webkit-mask-image: url('/icon/achievement_icon.svg'); mask-image: url('/icon/achievement_icon.svg'); background-image: none; }
.icon--mask.icon-arrow-down { -webkit-mask-image: url('/icon/arrow_down_icon.svg'); mask-image: url('/icon/arrow_down_icon.svg'); background-image: none; }
.icon--mask.icon-bell { -webkit-mask-image: url('/icon/bell_icon.svg'); mask-image: url('/icon/bell_icon.svg'); background-image: none; }
.icon--mask.icon-book { -webkit-mask-image: url('/icon/book_icon.svg'); mask-image: url('/icon/book_icon.svg'); background-image: none; }
.icon--mask.icon-calendar { -webkit-mask-image: url('/icon/calendar_icon.svg'); mask-image: url('/icon/calendar_icon.svg'); background-image: none; }
.icon--mask.icon-certificate { -webkit-mask-image: url('/icon/certificate_icon.svg'); mask-image: url('/icon/certificate_icon.svg'); background-image: none; }
.icon--mask.icon-chat { -webkit-mask-image: url('/icon/chat_bubble_icon.svg'); mask-image: url('/icon/chat_bubble_icon.svg'); background-image: none; }
.icon--mask.icon-chat-icon { -webkit-mask-image: url('/icon/chat_icon.svg'); mask-image: url('/icon/chat_icon.svg'); background-image: none; }
.icon--mask.icon-check-mark { -webkit-mask-image: url('/icon/check_mark_icon.svg'); mask-image: url('/icon/check_mark_icon.svg'); background-image: none; }
.icon--mask.icon-circle-checkbox-checked { -webkit-mask-image: url('/icon/circle_checkbox_checked_icon.svg'); mask-image: url('/icon/circle_checkbox_checked_icon.svg'); background-image: none; }
.icon--mask.icon-circle-checkbox { -webkit-mask-image: url('/icon/circle_checkbox_icon.svg'); mask-image: url('/icon/circle_checkbox_icon.svg'); background-image: none; }
.icon--mask.icon-clock { -webkit-mask-image: url('/icon/clock_icon.svg'); mask-image: url('/icon/clock_icon.svg'); background-image: none; }
.icon--mask.icon-cloud-upload { -webkit-mask-image: url('/icon/cloud_upload_icon.svg'); mask-image: url('/icon/cloud_upload_icon.svg'); background-image: none; }
.icon--mask.icon-course { -webkit-mask-image: url('/icon/course_icon.svg'); mask-image: url('/icon/course_icon.svg'); background-image: none; }
.icon--mask.icon-download { -webkit-mask-image: url('/icon/download_icon.svg'); mask-image: url('/icon/download_icon.svg'); background-image: none; }
.icon--mask.icon-eye { -webkit-mask-image: url('/icon/eye_icon.svg'); mask-image: url('/icon/eye_icon.svg'); background-image: none; }
.icon--mask.icon-farvorite,
.icon--mask.icon-favorite { -webkit-mask-image: url('/icon/farvorite_icon.svg'); mask-image: url('/icon/farvorite_icon.svg'); background-image: none; }
.icon--mask.icon-heart { -webkit-mask-image: url('/icon/heart_icon.svg'); mask-image: url('/icon/heart_icon.svg'); background-image: none; }
.icon--mask.icon-file { -webkit-mask-image: url('/icon/file_icon.svg'); mask-image: url('/icon/file_icon.svg'); background-image: none; }
.icon--mask.icon-folder { -webkit-mask-image: url('/icon/folder_icon.svg'); mask-image: url('/icon/folder_icon.svg'); background-image: none; }
.icon--mask.icon-gold-star { -webkit-mask-image: url('/icon/gold_star_icon.svg'); mask-image: url('/icon/gold_star_icon.svg'); background-image: none; }
.icon--mask.icon-home { -webkit-mask-image: url('/icon/home_icon.svg'); mask-image: url('/icon/home_icon.svg'); background-image: none; }
.icon--mask.icon-image { -webkit-mask-image: url('/icon/image_icon.svg'); mask-image: url('/icon/image_icon.svg'); background-image: none; }
.icon--mask.icon-lession,
.icon--mask.icon-lesson { -webkit-mask-image: url('/icon/lession_icon.svg'); mask-image: url('/icon/lession_icon.svg'); background-image: none; }
.icon--mask.icon-link { -webkit-mask-image: url('/icon/link_icon.svg'); mask-image: url('/icon/link_icon.svg'); background-image: none; }
.icon--mask.icon-lock { -webkit-mask-image: url('/icon/lock_icon.svg'); mask-image: url('/icon/lock_icon.svg'); background-image: none; }
.icon--mask.icon-plus { -webkit-mask-image: url('/icon/plus_icon.svg'); mask-image: url('/icon/plus_icon.svg'); background-image: none; }
.icon--mask.icon-ratting,
.icon--mask.icon-rating { -webkit-mask-image: url('/icon/ratting_icon.svg'); mask-image: url('/icon/ratting_icon.svg'); background-image: none; }
.icon--mask.icon-reload { -webkit-mask-image: url('/icon/reload_icon.svg'); mask-image: url('/icon/reload_icon.svg'); background-image: none; }
.icon--mask.icon-search { -webkit-mask-image: url('/icon/search_icon.svg'); mask-image: url('/icon/search_icon.svg'); background-image: none; }
.icon--mask.icon-setting { -webkit-mask-image: url('/icon/setting_icon.svg'); mask-image: url('/icon/setting_icon.svg'); background-image: none; }
.icon--mask.icon-sort { -webkit-mask-image: url('/icon/sort_icon.svg'); mask-image: url('/icon/sort_icon.svg'); background-image: none; }
.icon--mask.icon-start { -webkit-mask-image: url('/icon/start_icon.svg'); mask-image: url('/icon/start_icon.svg'); background-image: none; }
.icon--mask.icon-timer { -webkit-mask-image: url('/icon/timer_icon.svg'); mask-image: url('/icon/timer_icon.svg'); background-image: none; }
.icon--mask.icon-trash { -webkit-mask-image: url('/icon/trash_can_icon.svg'); mask-image: url('/icon/trash_can_icon.svg'); background-image: none; }
.icon--mask.icon-trash-no-bg { -webkit-mask-image: url('/icon/trash_can_icon_no_bg.svg'); mask-image: url('/icon/trash_can_icon_no_bg.svg'); background-image: none; }
.icon--mask.icon-user { -webkit-mask-image: url('/icon/user_icon.svg'); mask-image: url('/icon/user_icon.svg'); background-image: none; }
.icon--mask.icon-x { -webkit-mask-image: url('/icon/x_icon.svg'); mask-image: url('/icon/x_icon.svg'); background-image: none; }
.icon--mask.icon-arrow-right { -webkit-mask-image: url('/icon/arrow_right_icon.svg'); mask-image: url('/icon/arrow_right_icon.svg'); background-image: none; }