@use "../../wc";

zn-timer, :host {
  --timer-color: var(--zn-color-success);
  pointer-events: none;
  white-space: nowrap;
  display: inline-block;

  .last-message {
    color: rgb(var(--timer-color));

    display: flex;
    align-items: center;
    gap: 5px;

    .time {
      font-size: 12px;
      line-height: 15px;
      flex-grow: 1;
    }

    &-indicator {
      display: inline-block;
      background-color: rgb(var(--timer-color));
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
  }
}

:host([flip]) {
  .last-message {
    flex-direction: row-reverse;
  }
}

:host([type="error"]) {
  --timer-color: var(--zn-color-error);
}