@use '../mixins';

/* Message Status */

@keyframes __status-icon--spinning {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.status-icon {
  @include mixins.button-reset;
  cursor: default;
  width: 18px; // respect the 1.5:1 aspect ratio (dictated by delivered & seen icon)
  height: 12px;
  display: inline-block;
  margin-inline-start: 2px;

  &.sending {
    @include mixins.color-svg(
      './images/sending.svg',
      var(--messageStatusIconSending)
    );
    animation: __status-icon--spinning 4s linear infinite;
    // ensure the element takes always the same width:
    width: 12px;
    margin-inline-start: 8px;
  }
  &.delivered {
    @include mixins.color-svg('./images/sent.svg', var(--messageStatusIcon));
  }

  &.read {
    @include mixins.color-svg('./images/read.svg', var(--messageStatusIcon));
  }

  &.error {
    @include mixins.color-svg('./images/error.svg', var(--errorColor));
    // ensure the element takes always the same width:
    width: 12px;
    margin-inline-start: 8px;
    cursor: pointer;
  }
}
