@use "./mixins/mixins.scss" as *;

.#{$namespace}-icon-loading {
  animation: rotating 2s linear infinite;
}

.#{$namespace}-icon--right {
  margin-left: 5px;
}
.#{$namespace}-icon--left {
  margin-right: 5px;
}

@keyframes rotating {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

@include b(icon) {
  --color: inherit;
  --font-size:var(--x-font-size-base);
  height: 1em;
  width: 1em;
  line-height: 1em;
  text-align: center;
  display: inline-block;
  position: relative;
  fill: currentColor;
  color: inherit;
  color: var(--color);
  font-size:var(--font-size);

  @include when(loading) {
    animation: rotating 2s linear infinite;
  }

  svg {
    height: 1em;
    width: 1em;
  }
}

.x-icon__more {
  align-items: center;
  background: var(--color-bg-2);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 6px 0;
  box-sizing: border-box;
  
  > span {
    background-color: #62a6ff;
    border-radius: 50%;
    height: 3px;
    width: 3px;
  }
}