@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;

:host {
  display: inline-block;
  vertical-align: bottom;
}

.sky-icon-stack-size-xs {
  &.fa-stack {
    width: 1.25em;
    height: 1.25em;
    line-height: 1.25em;
  }

  .fa-stack-2x {
    font-size: 1.25em;
  }

  .fa-stack-1x {
    font-size: 0.625em;
  }
}

// Temporary overrides until the proportions of stackable SKY UX icons have been corrected.
// TODO: correct the proportions of stackable SKY UX icons
.fa-stack-1x {
  &.sky-i-check:before {
    position: relative;
    top: 0.5px;
  }

  &.sky-i-exclamation:before {
    position: relative;
    top: 1.5px;
  }
}

.sky-icon-inverse {
  color: var(--sky-icon-stack-top-icon-color-override, $sky-text-color-on-dark);
}

@include mixins.sky-theme-modern-dark {
  .sky-icon-inverse {
    color: $sky-theme-modern-mode-dark-background-color-page-default;
  }
}
