.ayu-circle {
  display: inline-block;
  position: relative;
  .ayu-circle-content {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
  }
  .ayu-circle-success {
    p {
      color: $color-success;
    }
    color: $color-success;
  }
  .ayu-circle-info {
    p {
      color: $color-info;
    }
    color: $color-info;
  }
  .ayu-circle-warning {
    p {
      color: $color-warning;
    }
    color: $color-warning;
  }
  .ayu-circle-danger {
    p {
      color: $color-danger;
    }
    color: $color-danger;
  }
}