@use "../vars/variables";

.countdown-circle {
  position: relative;
  width: 1.875rem;
  height: 1.875rem;

  &__svg {
    width: 100%;
    height: 100%;
    transform: scale(-1, 1) rotate(-90deg);
  }

  &__circle {
    fill: none;
    stroke: var(--uc-white);
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear;
  }

  &__icon {
    position: absolute;
    top: 0.5rem;
    left: 0.5625rem;

    i {
      position: relative;
      top: -1px;
      font-size: 0.75rem;
    }
  }

  &--warning {
    .countdown-circle {
      &__circle {
        stroke: var(--uc-warning-warning);
      }
    }
  }
}