@use "../variables" as vars;
@use "../functions" as func;

$icons: (
    "accessibility-new",
    "account",
    "add-a-photo",
    "add-document",
    "analytics",
    "apps",
    "arrow-back",
    "arrow-downward",
    "arrow-forward",
    "arrow-upward",
    "assignment",
    "attach-file",
    "bookmark",
    "bookmarks",
    "business",
    "calculator",
    "calendar-month",
    "car",
    "chat",
    "check",
    "checklist",
    "check-white",
    "chevron-double-left",
    "chevron-double-right",
    "chevron-down",
    "chevron-down-white",
    "chevron-left",
    "chevron-right",
    "chevron-up",
    "close",
    "construction",
    "contact-card",
    "contact-info",
    "contact-support",
    "copy",
    "coronavirus",
    "create-new-folder",
    "credit-card",
    "database",
    "delete",
    "desktop",
    "document",
    "download",
    "download-done",
    "drag-pan",
    "edit",
    "email",
    "engineering",
    "error",
    "error-white",
    "feedback",
    "file",
    "file-excel",
    "file-image",
    "file-pdf",
    "file-word",
    "first-page",
    "flag",
    "flag-fill",
    "folder",
    "folder-open",
    "format-align-center",
    "format-align-justify",
    "format-align-left",
    "format-align-right",
    "format-bold",
    "format-clear",
    "format-color-fill",
    "format-color-text",
    "format-indent-decrease",
    "format-indent-increase",
    "format-italic",
    "format-list-bulleted",
    "format-list-numbered",
    "format-size",
    "format-text",
    "format-underlined",
    "forum",
    "forward",
    "fullscreen",
    "fullscreen-exit",
    "groups",
    "headset",
    "help",
    "home",
    "hourglass",
    "how-to-reg",
    "info",
    "info-white",
    "language",
    "laptop",
    "last-page",
    "link",
    "list-add",
    "list-bulleted",
    "list-check",
    "location",
    "lock",
    "map",
    "menu",
    "minus",
    "minus-white",
    "more-horiz",
    "more-vert",
    "mouse",
    "notifications",
    "open-in-new",
    "palette",
    "payments",
    "person",
    "person-add",
    "person-remove",
    "persons",
    "photo-camera",
    "plus",
    "print",
    "refresh",
    "reply",
    "save",
    "science",
    "search",
    "send",
    "settings",
    "share",
    "shopping-cart",
    "smartphone",
    "sort-ascending",
    "sort-by-alpha",
    "sort-default",
    "sort-descending",
    "sort-table-ascending",
    "sort-table-descending",
    "sort-table-none",
    "star",
    "star-fill",
    "student",
    "subdirectory-arrow-left",
    "subdirectory-arrow-right",
    "success",
    "success-white",
    "summary",
    "support-agent",
    "sync",
    "time",
    "tractor",
    "trainee",
    "truck",
    "tune",
    "upload",
    "videocam",
    "view-in-list",
    "view-split",
    "visibility",
    "visibility-off",
    "warning",
    "zoom-in",
    "zoom-out"
) !default;

.icon{
    height: func.units(vars.$typography-body-text-line-height, 'rem');
    width: func.units(vars.$typography-body-text-line-height, 'rem');
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 100%;
}
.icon-svg {
    height: func.units(vars.$typography-body-text-line-height, 'rem');
    width: func.units(vars.$typography-body-text-line-height, 'rem');
    vertical-align: middle;
    fill: currentColor;
    &:focus{
      outline: none;
    }
}
.inline-svg{
  height: 1em;
  width: 1em;
}

@each $icon in $icons {
    .icon-#{$icon}:not(a) {
        background-image: url(vars.$icons-folder-path + $icon + ".svg");
    }
}

.hide-base-svg{ // hide inline svgs
    display: none;
}