@import "./scss/variable.scss";

#{$wcircle-prefix} {
  font-family: $text-family;
  font-size: $text-size-l;
  line-height: 1;
  color: $text-color-1;

  #{$wcircle-prefix}-main {

    #{$wcircle-prefix}-ratio {
      text-align: center;
      position: relative;
      #{$wcircle-prefix}-ratio-svg {
        display: inline-block;
        vertical-align: top;
        #{$wcircle-prefix}-svg-bg{
          stroke: $empty;
          stroke-linejoin: round;
          stroke-linecap: round;
          //opacity: 0.1;
          fill: none;
        }
        #{$wcircle-prefix}-svg-ring{
          stroke: currentColor;
          stroke-linejoin: round;
          stroke-linecap: round;
          fill: none;
          transition-property: stroke-dasharray, stroke;
          transition-duration: 0.8s, 0.8s;
        }

        .butt {
          #{$wcircle-prefix}-svg-bg,
          #{$wcircle-prefix}-svg-ring {
            stroke-linecap: butt;
          }
        }
      }

      #{$wcircle-prefix}-number-block{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        //top: 50%;
        //margin-top: -25px;
        text-align: center;

        display: flex;
        align-items: center;
        justify-content: center;

        #{$wcircle-prefix}-number-middle {}

        #{$wcircle-prefix}-unit {
          margin-left: $size-1;
          font-size: $text-size-s;
        }
        #{$wcircle-prefix}-title {
          font-size: $text-size-s;
          margin: 2px 0 0 0;
          line-height: 1;
          color: $text-color-2;
        }
      }

    }

  }
  .normal{
    color: $normal;
  }
  .blue{
    color: $blue;
  }
  .green {
    color: $green;
  }
  .orange{
    color: $orange;
  }
  .red{
    color: $red;
  }

  #{$wcircle-prefix}-number, #{$wcircle-prefix}-bottom-number {
    color: $number-color;
    vertical-align: bottom;

    &.drop {
      color: $red;
    }
    &.raise {
      color: $normal;
    }
  }

  #{$wcircle-prefix}-trend {
    margin-left: $size-2;
  }

  #{$wcircle-prefix}-leftIcon{
    position:relative;
    margin-right: $size-half;

    >.drop {
      color: $red;
    }
    >.raise {
      color: $normal;
    }
  }

  #{$wcircle-prefix}-bottom-block {
    font-size: $text-size-m;
    width: 100%;
    position: absolute;
    top: 100%;
    margin-top: -28px;
    text-align: center;
    #{$wcircle-prefix}-bottom-number {
      //margin-left: $size-1;
      //font-size: $text-size-s;
    }
    #{$wcircle-prefix}-bottom-unit {
      margin-left: $size-1;
      font-size: $text-size-s;
    }
    #{$wcircle-prefix}-title {
      font-size: $text-size-s;
      margin: 2px 0 0 0;
      line-height: 1;
      color: $text-color-2;
    }

  }
}