.sq-timer {
  
 
  width: 70px;
  height: 70px;

  &--small {
    width: 40px;
    height: 40px;
    .sq-timer__label {
      font-size: 12px;
    }

  }
  &--large {
    height: 300px;
    width: 300px;
    .sq-timer__label {
      font-size: 52px;
    }
  }

  &__container {
    position: relative;
  }

  &__circle {
    fill: none;
    stroke: none;
  }
  &__path-elapsed {
    stroke-width: 10px;
    fill:white;
    stroke: currentColor;
    color:$sq-color-gray-lighter;
    &.green {
      color:$sq-color-success;
    }
    &.warning {
      color:$sq-color-warning;
    }
    &.alert {
      color:$sq-color-error;
    }
  }
  &__label {
    
    position: absolute;
    
    /* Size should match the parent container */
    width: 100%;
    height: 100%;
    
    /* Keep the label aligned to the top */
    top: 0;
    color:$gray-light;
    
    /* Create a flexible box that centers content vertically and horizontally */
    display: flex;
    align-items: center;
    justify-content: center;
  
    /* Sort of an arbitrary number; adjust to your liking */
    font-size: 20px;
    
  }
  &__path-remaining {
    color:$sq-color-gray-lighter;
    /* Just as thick as the original ring */
    stroke-width: 10px;
  
    /* Rounds the line endings to create a seamless circle */
    stroke-linecap: round;
  
    /* Makes sure the animation starts at the top of the circle */
    transform: rotate(90deg);
    transform-origin: center;
  
    /* One second aligns with the speed of the countdown timer */
    transition: 1s linear all;
  
    /* Allows the ring to change color when the color value updates */
    stroke: currentColor;
    
    &.green {
      color:$sq-color-success;
    }
    &.warning {
      color:$sq-color-warning;
    }
    &.alert {
      color:$sq-color-error;
    }
  }
  &__svg {
    /* Flips the svg and makes the animation to move left-to-right */
    transform: scaleX(-1);
  }
}