@use 'sass:map';
@use 'sass:color';

@use 'common/var.scss'as *;
@use 'mixins/mixins'as *;

#{getClassName((loading, content-hidden))} {
  overflow: hidden;
}
#{getClassName((loading, parent-relative))} {
  position: relative !important;
  overflow: hidden;
}

#{getClassName((loading))} {
  position: absolute;
  width: 100%;height: 100%;
  left: 0;top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255,255,255,.9);
  transition: .5s all;
  z-index: 9;
  &.is-fullscreen {
    position: fixed;
    z-index: 8888;
  }
}

#{getClassName((loading, box))}  {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #{getValName((color, primary))};
  
  transition: .2s all;
  > i {
    display: inline-block;font-size: #{getValName((heading4))};margin-bottom: #{getValName((space, s))};
  }
  > div {
    max-width: 160px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: .5s all;
    &:empty {
      display: none;
    }
  }
}

.loading-fade-enter-from, .loading-fade-leave-to {
  #{getClassName((loading, box))} {
    transform: scale(0);
    opacity: 0;
    > div {
      transform: translateY(40px);
    }
  }
  opacity: 0;
}