//
// Icon sizes
//
$icon-sizes: (
   xs: 0.625rem,
   sm: 0.750rem,
   md: 1rem,
   lg: 1.250rem,
   xl: 1.5rem,
  xxl: 2.5rem,
  xxxl: 4.5rem
) !default;

.icon-container {
  position: relative;
  display: flex;
}

.icon {
  // set height and width to 1em, so icon size will match its parent
  height: 1em;
  width:  1em;
  fill: currentColor;
}

@include icon-sizing($icon-sizes);

$icon_dimension: 1.5rem;
$microsoft-icon: str-replace(url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0YzRjNGMyIgZD0iTTMgM2gyMnYyMkgzVjNaIi8+PHBhdGggZmlsbD0iI0YzNTMyNSIgZD0iTTMuOTU3IDMuOTU3aDkuNTY1djkuNTY1SDMuOTU3VjMuOTU3WiIvPjxwYXRoIGZpbGw9IiM4MUJDMDYiIGQ9Ik0xNC40NzggMy45NTdoOS41NjZ2OS41NjVoLTkuNTY2VjMuOTU3WiIvPjxwYXRoIGZpbGw9IiMwNUE2RjAiIGQ9Ik0zLjk1NyAxNC40NzhoOS41NjV2OS41NjZIMy45NTd2LTkuNTY2WiIvPjxwYXRoIGZpbGw9IiNGRkJBMDgiIGQ9Ik0xNC40NzggMTQuNDc4aDkuNTY2djkuNTY2aC05LjU2NnYtOS41NjZaIi8+PC9zdmc+"), "#", "%23");
$google-icon: str-replace(url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNC41NiAxNC4yNUMyNC41NiAxMy40NyAyNC40OSAxMi43MiAyNC4zNiAxMkgxNFYxNi4yNTVIMTkuOTJDMTkuNjY1IDE3LjYzIDE4Ljg5IDE4Ljc5NSAxNy43MjUgMTkuNTc1VjIyLjMzNUgyMS4yOEMyMy4zNiAyMC40MiAyNC41NiAxNy42IDI0LjU2IDE0LjI1WiIgZmlsbD0iIzQyODVGNCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE0IDI1QzE2Ljk3IDI1IDE5LjQ2IDI0LjAxNSAyMS4yOCAyMi4zMzVMMTcuNzI1IDE5LjU3NUMxNi43NCAyMC4yMzUgMTUuNDggMjAuNjI1IDE0IDIwLjYyNUMxMS4xMzUgMjAuNjI1IDguNzEwMDEgMTguNjkgNy44NDUwMSAxNi4wOUg0LjE3MDAxVjE4Ljk0QzUuOTgwMDEgMjIuNTM1IDkuNzAwMDEgMjUgMTQgMjVaIiBmaWxsPSIjMzRBODUzIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNy44NDUgMTYuMDlDNy42MjUgMTUuNDMgNy41IDE0LjcyNSA3LjUgMTRDNy41IDEzLjI3NSA3LjYyNSAxMi41NyA3Ljg0NSAxMS45MVY5LjA2SDQuMTdDMy40MjUgMTAuNTQ1IDMgMTIuMjI1IDMgMTRDMyAxNS43NzUgMy40MjUgMTcuNDU1IDQuMTcgMTguOTRMNy44NDUgMTYuMDlaIiBmaWxsPSIjRkJCQzA1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTQgNy4zNzVDMTUuNjE1IDcuMzc1IDE3LjA2NSA3LjkzIDE4LjIwNSA5LjAyTDIxLjM2IDUuODY1QzE5LjQ1NSA0LjA5IDE2Ljk2NSAzIDE0IDNDOS43MDAwMSAzIDUuOTgwMDEgNS40NjUgNC4xNzAwMSA5LjA2TDcuODQ1MDEgMTEuOTFDOC43MTAwMSA5LjMxIDExLjEzNSA3LjM3NSAxNCA3LjM3NVoiIGZpbGw9IiNFQTQzMzUiLz4KPC9zdmc+Cg=="), "#", "%23");
$leap_domain_icon: str-replace(url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNSAzSDNWMjVIMjVWM1pNMTYuMDgwMyAxMy41OTYzTDEyLjg2NjMgMTIuMzUxN0wxOS44NzExIDEzLjQ4MzRMMjAuOTc0NiAxOS44NjY5TDIyIDEwLjY0NDFMMTQuNjI4OSA3TDEyLjg2NjMgMTIuMzUxN0wxMi4zMzE3IDEzLjk3NjdMNiAyMUwxNC41OTQ2IDE2LjY2OUwxNi4wODAzIDEzLjU5NjNaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K"), "#", "%23");
$external_user_icon: str-replace(url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy4xMjU3IDI1QzE1Ljg0NzYgMjIuMzg5NSAxNSAxOC45NDQ3IDE1IDE1LjVDMTUuMzE1OCAxNS4zMTA1IDE1LjY4ODYgMTUuMDc1NCAxNi4wOTc4IDE0LjgxNzRDMTYuODcxNCAxNC4zMjk2IDE3Ljc3NTIgMTMuNzU5NyAxOC42NzAyIDEzLjI2MDZDMTkuMTMwOCAxMi4xOTc3IDE4Ljg4MjUgMTEuMzA5IDE4LjcxMTQgMTAuOTAwNkMxOS44Njg4IDguMjc0ODIgMTguNDY4IDYuMTAyMzMgMTguMTcwNyA1LjY4NzJDMTcuNDE3NyAzLjQ2ODMzIDE1LjgxMDIgMyAxNC41ODg0IDNDMTMuMTQgMyAxMS44NTI5IDMuNjUwMiAxMS44MzI1IDMuNjYyMDJDMTAuNDkyNSA0LjIxMDgzIDkuNTc4MTEgNS4wODY1NiA5LjExNjA0IDYuMjY0NjVDOC4zNjk2MyA4LjE2NzA2IDkuMDQ2NzMgMTAuMjU2MyA5LjI5MTk4IDEwLjg5NzlDOC42OTA4NSAxMi4zODQzIDkuMzgzOTUgMTMuMzk5MSA5LjQxNTA1IDEzLjQ0MzdMOS41MDgzNSAxMy41NDE0QzkuNTI0MzUgMTMuNTUzMyAxMS4xMDg3IDE0LjgwNjggMTEuMTA4NyAxNi44MTU2QzExLjEwODcgMTguNzYxMiAxMC4wNjY4IDE5LjExNzMgOC43NDY4MyAxOS41Njc0TDguNTc0IDE5LjYyNTZDNy4wODkxNyAyMC4xMjUzIDQgMjEuMTY1MiA0IDI0LjU0NTNWMjVIMTcuMTI1N1oiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjIgMjhWMjYuNUMyMiAyNy43MyAyMiAyOCAyMiAyOEMxOSAyOCAxNiAyMiAxNiAxNkMxNy41IDE1LjEgMjAuNSAxMyAyMiAxM0MyMy41IDEzIDI2LjUgMTUuMSAyOCAxNkMyOCAyMiAyNSAyOCAyMiAyOFpNMjIgMjYuNUMyMiAyNS40ODQyIDIyIDIzLjgxMzggMjIgMjEuMUwyNS44NzUyIDIxLjEwNjRDMjYuMjExOCAxOS44ODQ0IDI2LjQzMjUgMTguNTQ1NCAyNi40ODM4IDE3LjE4OTlDMjYuNDkxNCAxNi45ODkyIDI2LjUgMTYuODgxMyAyNi41IDE2Ljg4MTNDMjYuNSAxNi44ODEzIDI1LjI1NTIgMTYuMDY3NiAyNC45OTYxIDE1LjkwMjhDMjQuNzI4OCAxNS43MzMgMjQuNDgzIDE1LjU4MTQgMjQuMjQ5IDE1LjQ0MzFDMjMuMjE4NSAxNC44MzM3IDIyLjQ0MzIgMTQuNTAyMiAyMiAxNC41VjIxLjEzMjVDMjAuNzkwNyAyMS4xMzI1IDE5LjIzNTggMjEuMTMyNSAxOC4xMjM0IDIxLjEzMjVDMTguOTY5NSAyNC4xODUgMjAuNTM4OSAyNi41IDIxLjk5NTcgMjYuNUwyMiAyNi41WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg=="), "#", "%23");
*[class^='auth_icon'],
*[class*=' auth_icon'] {
  width: $icon_dimension;
  height: $icon_dimension;
  margin-top: -0.0625rem;

  &::before {
    width: $icon_dimension;
    height: $icon_dimension;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100%;
    content: '';
  }
}

.auth_icon {
  &_microsoft::before {
    background-image: $microsoft-icon;
  }
  
  &_google::before {
    background-image: $google-icon;
  }

  &_leap::before {
    background-image: $leap_domain_icon;
  }

  &_external_user::before {
    background-image: $external_user_icon;
  }
}