.ui-ring {
  position: relative;

  &__text-container {
    height: 100%;
  }

  &--md {
    width: $ui-ring-size-medium;
    height: $ui-ring-size-medium;
  }

  &--sm {
    width: $ui-ring-size-small;
    height: $ui-ring-size-small;
  }

  &--lg {
    width: $ui-ring-size-medium;
    height: $ui-ring-size-medium;
  }

  &--orange {
    .ui-ring__gradient-top {
      stop-color: $ui-ring-color;
    }
    .ui-ring__gradient-bottom {
      stop-color: $ui-ring-color;
    }
    .ui-ring__label {
      color: $ui-ring-text-color;
    }
  }

  &--light {
    .ui-ring__gradient-top {
      stop-color: $ui-ring-color;
    }
    .ui-ring__gradient-bottom {
      stop-color: $ui-ring-color;
    }
    .ui-ring__label {
      color: $ui-ring-text-color;
    }
  }
}