@use "../variables" as *;
@use "../mixins" as *;
@use "../utils" as *;

.mie.icon {
  @include flex(none, center, center);
  transition: all 0.3s ease;

  svg {
    transition: all 0.3s ease;

    max-height: mvar("icon.fs");
    max-width: mvar("icon.fs");
    height: mvar("icon.fs");
    width: mvar("icon.fs");
    color: mvar("icon.fg");
  }

  &.filled {
    background-color: mvar("icon.bg.filled");
  }

  &.circular {
    border-radius: 50%;
  }

  &.bg {
    background-color: mvar("icon.bg.main");
  }
}
