icon.element.scss

@import './../styles/tokens/generated/index';
@import './../styles/mixins/mixins';

@mixin flipSVGIcon($direction) {
  @if $direction == 'horizontal' {
    transform: scale(-1) rotateX(180deg);
    /* stylelint-disable */
  } @else if $direction == 'vertical' {
    /* stylelint-enable */
    transform: scale(-1) rotateY(180deg);
  }
}

:host {
  --color: currentColor;
  display: inline-block;
  @include equilateral(#{$cds-global-space-7});
  @include min-equilateral(#{$cds-global-space-7});
  margin: 0;
  vertical-align: middle;
  fill: var(--color);
  color: var(--color); // See https://github.com/vmware/clarity/issues/5332
  contain: strict;
  cursor: inherit;
}

svg {
  display: block;
}

// sizing
:host([size*='xs']) {
  @include equilateral(#{$cds-global-space-5});
  @include min-equilateral(#{$cds-global-space-5});
}

:host([size*='sm']) {
  // weirdly, the default... 16px
  @include equilateral(#{$cds-global-space-7});
  @include min-equilateral(#{$cds-global-space-7});
}

:host([size*='md']) {
  // 24px
  @include equilateral(#{$cds-global-space-9});
  @include min-equilateral(#{$cds-global-space-9});
}

:host([size*='lg']) {
  // 36px
  @include equilateral(#{$cds-global-space-11});
  @include min-equilateral(#{$cds-global-space-11});
}

// note: the selectors for `xl` and `xxl` work as expected due to the order in
// which they are listed here. this is fine and expected for CSS. just know
// that if their order is switched around, they will break.
// likewise if we add an `xxs` it will have to go AFTER `xs`!
:host([size*='xl']) {
  // 48px
  @include equilateral(#{$cds-global-space-12});
  @include min-equilateral(#{$cds-global-space-12});
}

:host([size*='xxl']) {
  // 64px
  @include equilateral(calc(#{$cds-global-space-13} - #{$cds-global-space-5}));
  @include min-equilateral(calc(#{$cds-global-space-13} - #{$cds-global-space-5}));
}

:host([size*='fit']) {
  height: auto;
  width: auto;
  contain: layout;
}

// colors
:host([status='success']) {
  --color: #{$cds-alias-status-success};
}

:host([status='danger']) {
  --color: #{$cds-alias-status-danger};
}

:host([status='warning']) {
  --color: #{$cds-alias-status-warning-dark};
}

:host([status='info']) {
  --color: #{$cds-alias-status-info-shade};
}

:host([inverse]) {
  --color: #{$cds-global-color-construction-200};
}

// directional
:host([direction='up']) {
  transform: rotate(0deg);
}

:host([direction='down']) {
  transform: rotate(180deg);
}

:host([direction='right']) {
  transform: rotate(90deg);
}

:host([direction='left']) {
  transform: rotate(270deg);
}

:host([flip='horizontal']) {
  @include flipSVGIcon('horizontal');
}

:host([flip='vertical']) {
  @include flipSVGIcon('vertical');
}

.badge,
.alert {
  fill: var(--badge-color, #{$cds-alias-status-danger});
}

// variant badge colors

:host([badge='success']) {
  --badge-color: #{$cds-alias-status-success};
}

:host([badge='danger']) {
  --badge-color: #{$cds-alias-status-danger};
}

:host([badge*='warning']) {
  --badge-color: #{$cds-alias-status-warning-dark};
}

:host([badge='inherit']) {
  --badge-color: currentColor;
}

:host([badge='info']) {
  --badge-color: #{$cds-alias-status-info};
}

// alert colors
:host([badge='inherit-triangle']) {
  --badge-color: currentColor;
}

// inverse + variants
:host([badge][inverse]) {
  --badge-color: #{$cds-alias-status-danger};
}

// variant badge colors
:host([badge='success'][inverse]) {
  --badge-color: #{$cds-alias-status-success};
}

:host([badge*='warning'][inverse]) {
  --badge-color: #{$cds-alias-status-warning-dark};
}

:host([badge*='inherit'][inverse]) {
  --badge-color: currentColor;
}

:host([badge='info'][inverse]) {
  --badge-color: #{$cds-alias-status-info};
}

// unknown icon animation

.cds-internal-dot-1 {
  animation: fadeInAndOut 1.8s ease-in 0s infinite;
}

.cds-internal-dot-2 {
  animation: fadeInAndOut 1.8s ease-out 0.422s infinite;
}

.cds-internal-dot-3 {
  animation: fadeInAndOut 1.8s ease-out 0.675s infinite;
}

@keyframes fadeInAndOut {
  0% {
    opacity: 0;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion) {
  .cds-internal-dot-1 {
    animation: none;
  }

  .cds-internal-dot-2 {
    animation: none;
  }

  .cds-internal-dot-3 {
    animation: none;
  }
}