@import '../settings/variables';

.c-icon-circle {
  $this: &;
  display: inline-block;
  border: 0.1em solid $color-selected;
  border-radius: 50%;
  font-size: 0.75em;
  width: 1em;
  height: 1em;

  &--filled {
    background-color: $color-selected;
  }

  &--warning {
    background-color: $color-warn-low;
  }

  &--primary {
    border: 0.1em solid $color-primary;

    &#{$this}--filled {
      background-color: $color-primary;
    }
  }

  &--progress-bar {
    border: 0.1em solid $color-paragraph-light;

    &#{$this}--filled {
      background-color: $color-paragraph-light;
    }
  }

  &--stripped {
    background-image: linear-gradient(
                    135deg,
                    $color-selected 14.29%,
                    $color-neutral 14.29%,
                    $color-neutral 50%,
                    $color-selected 50%,
                    $color-selected 64.29%,
                    $color-neutral 64.29%,
                    $color-neutral 100%
    );
    background-size: 0.5em 0.5em;
  }

  &--middle {
    vertical-align: middle;
  }
}