.circle-chart {
  &__circle {
    &.highlighted {
      fill-opacity: 1;
    }

    &.highlight-background {
      fill-opacity: 0.4;
    }
  }

  &__label {
    text-transform: uppercase;
    fill: $ui-5-color;

    &.highlight-background {
      display: none;
    }
  }

  .circle-highlight {
    stroke: $ui-5-color;
  }

  &__legend {
    @extend .p-xsmall;
    &__list {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      @extend .m-none;
      @extend .p-none;
    }

    &__item {
      @extend .pl-small;
      flex-basis: 45%;
      cursor: default;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      &__badge {
        @include legendMarker();
      }

      &__label {
        text-transform: uppercase;
        display: inline;
        @extend .quiet;
        @extend .ml-small;
      }

      &--highlighted {
        opacity: 1;

        .circle-chart__legend__item__label {
          color: $ui-5-color;
        }

        .circle-chart__legend__item__badge {
          opacity: 1;
          border: 2px solid $tooltip-background-color;
          box-shadow: 0 0 0 1px $ui-5-color;
        }
      }

      &--highlight-background {
        opacity: 0.4;
      }
    }
  }
}