/*
  ? e.g. icon icon-rightside icon-arrow--right
  ? check design library for icon names
  ? https://svgomg.net/
  ? https://www.svgviewer.dev/svg-to-data-uri
  CHANGELOG
  * 1.0.2 - Added icons for email and generate-pdf
  * 2.0.0 - Reconfigured rules and set up for consistent styling. modified rules cascade for what colour is used, added a white icon colour for arrow--right
*/

.item-page :is(.btn, .button).icon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-100, 8px);
  white-space: normal;

  &::after {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background: none no-repeat center/100%;
    content: "";
  }

  &.icon-rightside {
    flex-direction: row;
  }

  &.icon-leftside {
    flex-direction: row-reverse;
  }

  &:is(.btn-sm, .button-small)::after {
    width: 1.143em;
    height: 1.143em;
  }

  &.icon-arrow--right {
    /* fill: Brand Primary 500 */
    &::after {
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23001080%22%20d%3D%22m13.5%204.5-1.072%201.045%205.685%205.705H3v1.5h15.113l-5.685%205.68L13.5%2019.5%2021%2012z%22%2F%3E%3C%2Fsvg%3E");
    }
    /* fill: white */
    &.button-primary::after {
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m13.5%204.5-1.072%201.045%205.685%205.705H3v1.5h15.113l-5.685%205.68L13.5%2019.5%2021%2012z%22%2F%3E%3C%2Fsvg%3E");
    }
  }

  &.icon-email {
    /* fill: Brand Primary 500 */
    &::after {
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23001080%22%20d%3D%22M21%204.5H3A1.5%201.5%200%200%200%201.5%206v12A1.5%201.5%200%200%200%203%2019.5h18a1.5%201.5%200%200%200%201.5-1.5V6A1.5%201.5%200%200%200%2021%204.5M19.35%206%2012%2011.085%204.65%206zM3%2018V6.683l8.573%205.932a.75.75%200%200%200%20.854%200L21%206.683V18z%22%2F%3E%3C%2Fsvg%3E");
    }
    /* fill: white */
    &.button-primary::after {
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M21%204.5H3A1.5%201.5%200%200%200%201.5%206v12A1.5%201.5%200%200%200%203%2019.5h18a1.5%201.5%200%200%200%201.5-1.5V6A1.5%201.5%200%200%200%2021%204.5M19.35%206%2012%2011.085%204.65%206zM3%2018V6.683l8.573%205.932a.75.75%200%200%200%20.854%200L21%206.683V18z%22%2F%3E%3C%2Fsvg%3E");
    }
  }

  &.icon-generate-pdf {
    /* fill: Brand Primary 500 */
    &::after {
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23001080%22%20d%3D%22M18%2018v3H6v-3H4.5v3A1.5%201.5%200%200%200%206%2022.5h12a1.5%201.5%200%200%200%201.5-1.5v-3z%22%2F%3E%3Cpath%20fill%3D%22%23001080%22%20d%3D%22m15.75%2015.75-1.06-1.06-1.94%201.939V10.5h-1.5v6.129l-1.94-1.94-1.06%201.061L12%2019.5zM21%203V1.5h-4.5V9H18V6h2.25V4.5H18V3zM12.75%209h-3V1.5h3A2.253%202.253%200%200%201%2015%203.75v3A2.253%202.253%200%200%201%2012.75%209m-1.5-1.5h1.5a.75.75%200%200%200%20.75-.75v-3a.75.75%200%200%200-.75-.75h-1.5zM6.75%201.5H3V9h1.5V6.75h2.25a1.5%201.5%200%200%200%201.5-1.5V3a1.5%201.5%200%200%200-1.5-1.5M4.5%205.25V3h2.25v2.25z%22%2F%3E%3C%2Fsvg%3E");
    }
    /* fill: white */
    &.button-primary::after {
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M18%2018v3H6v-3H4.5v3A1.5%201.5%200%200%200%206%2022.5h12a1.5%201.5%200%200%200%201.5-1.5v-3z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m15.75%2015.75-1.06-1.06-1.94%201.939V10.5h-1.5v6.129l-1.94-1.94-1.06%201.061L12%2019.5zM21%203V1.5h-4.5V9H18V6h2.25V4.5H18V3zM12.75%209h-3V1.5h3A2.253%202.253%200%200%201%2015%203.75v3A2.253%202.253%200%200%201%2012.75%209m-1.5-1.5h1.5a.75.75%200%200%200%20.75-.75v-3a.75.75%200%200%200-.75-.75h-1.5zM6.75%201.5H3V9h1.5V6.75h2.25a1.5%201.5%200%200%200%201.5-1.5V3a1.5%201.5%200%200%200-1.5-1.5M4.5%205.25V3h2.25v2.25z%22%2F%3E%3C%2Fsvg%3E");
    }
  }
}