@use 'sass:math';
@use '../../_styles/variables' as *;
@use '../../_styles/mixins' as *;
$loadingPrefixClass: #{$prefix}loading;

.#{$loadingPrefixClass} {
  display: inline-flex;
  font-size: 28px;
  color: $loadingTextColor;
  line-height: math.div(40, 28) * 1em;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  > .#{$prefix}icon {
    font-size: 1.2em;
    ~ .#{$prefix}loading__text {
      margin-left: 14px;
    }
  }
  &.is-vertical {
    display: inline-flex;
    flex-flow: column wrap;
    align-items: center;
    .#{$prefix}loading__text {
      margin: 14px 0 0 0;
    }
  }
}