$component-identifier: '.svg-icon';

#{$component-identifier} {
  &__outer-container {
    display: inline-flex;
    user-select: none;

    &.is-clickable {
      cursor: pointer;
    }
  }

  &__container {
    display: inline-flex;

    position: relative;
    width: 16px;
    height: 16px;
    fill: $color-dark-text;

    &.m-success {
      fill: $color-success-svg-icon;
    }

    &.m-info {
      fill: $color-info-svg-icon;
    }

    &.m-warning {
      fill: $color-warning-svg-icon;
    }

    &.m-danger {
      fill: $color-danger-svg-icon;
    }
  }

  &__indicator {
    height: .9rem;
    width: .9rem;
    border-radius: 50%;
    border: 1px solid $color-white;
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: $color-dark-text;

    &.m-success {
      background-color: $color-success-svg-icon;
    }

    &.m-info {
      background-color: $color-info-svg-icon;
    }

    &.m-warning {
      background-color: $color-warning-svg-icon;
    }

    &.m-danger {
      background-color: $color-danger-svg-icon;
    }
  }

  height: 100%;
  width: 100%;
}

$component-identifier: '';