//
// Icon component
//
@use '../config' as *;

.icon {
  --icon-size: #{$font-size-base * $line-height-base};
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  font-size: var(--icon-size);
  vertical-align: bottom;
  transform-origin: center;

  @if $icon-stroke-width {
    stroke-width: $icon-stroke-width;
  }

  &:hover {
    text-decoration: none;
  }
}

//
// Inline icon
//
.icon-inline {
  --icon-size: #{$icon-inline-size};
  --icon-inline-vertical-align: #{$icon-inline-vertical-align};
  vertical-align: var(--icon-inline-vertical-align);
}

//
// Filled icon
//
.icon-filled {
  fill: currentColor;
}

//
// Icon size
//
.icon-sm {
  --icon-size: #{$icon-sm-size};
  stroke-width: 1.5;
}

.icon-md {
  --icon-size: #{$icon-md-size};
  stroke-width: 1;
}

.icon-lg {
  --icon-size: #{$icon-lg-size};
  stroke-width: 1;
}

//
// Icons animation
//
.icon-pulse {
  transition: all 0.15s ease 0s;
  animation: pulse 2s ease infinite;
  animation-fill-mode: both;
}

.icon-tada {
  transition: all 0.15s ease 0s;
  animation: tada 3s ease infinite;
  animation-fill-mode: both;
}

.icon-rotate {
  transition: all 0.15s ease 0s;
  animation: rotate-360 3s linear infinite;
  animation-fill-mode: both;
}