// Accordion Variant
@mixin accordion-variant($color, $lighten-color) {
  .ui-accordion-header.ui-state-active {
    color: $color;
  }

  &.accordion-style1 {
    .ui-accordion-header.ui-state-active {
      border-color: $color;
      background-color: $lighten-color;
    }

    .ui-accordion-content.ui-accordion-content-active {
      border-color: $color;
      background-color: $lighten-color;
    }
  }

  &.accordion-style2 {
    .ui-accordion-header {
      background-color: $color;

      &:hover { background-color: darken($color, 2%); }

      &.ui-state-active {
        background-color: $lighten-color;
        color: $color;
        border-color: $color;
      }
    }

    .ui-accordion-content {
      background-color: $lighten-color;
      border-color: $color;
    }
  }
}

// Marker Variations
@mixin marker-variant($color) {
  color: #fff;

  &.marker-icon {
    &::before { background-color: $color; }
  }

  &.marker-ribbon {
    background-color: $color;
    &::after { border-bottom-color: darken($color, 15%); }
  }
}

// $name = class name
// $perc = donut percentage value
// $size = size of donut
// $width = width of chart
// $base = thickness of donut
// $center = background color of the percentage
// $color = background color of donut hole
// $textColor = color of text in center and the percentage
// $textSize = size of text
@mixin donut-chart($name, $perc, $size, $width, $base, $center, $color, $textColor: $color, $textSize: 40px) {

  $color2: $color;
  $base2: $base;
	$deg: ($perc/100*360)+deg;
	$deg1: 90deg;
	$deg2: $deg;

	// If percentage is less than 50%
	@if $perc < 50 {
		$base: $color;
    $color: $base2;
    $color2: $base2;
    $deg1: ($perc/100*360+90)+deg;
		$deg2: 0deg;
	}

  .az-donut-chart {
    &#{$name} {
      width: $size;
      height: $size;
      background: $base;

      .slice {
        &.one {
          clip: rect(0 $size $size/2 0);
          -webkit-transform: rotate($deg1);
          transform: rotate($deg1);
          background: $color;
        }

        &.two {
          clip: rect(0 $size/2 $size 0);
          -webkit-transform: rotate($deg2);
          transform: rotate($deg2);
          background: $color2;
        }
      }

      .chart-center {
        top: $width;
        left: $width;
        width: $size - ($width * 2);
        height: $size - ($width * 2);
        background: $center;

        span {
          font-size: $textSize;
          line-height: $size - ($width * 2);
          color: $textColor;

          &:after {
          content: '#{$perc}%';
          }
        }
      }
    }
  }
}