@import '@helsenorge/designsystem-react/scss/palette';

$className: svgicon;
$fontSize: --fontsize-;
$state: --state-;
$stroked: --stroked;

.#{$className} {
  user-select: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  fill: currentcolor;
  flex-shrink: 0;
  font-size: 24px;

  &:focus {
    outline: none;
  }

  &--stroked {
    fill: none;
    stroke: currentcolor;
  }

  &#{$fontSize} {
    &inherit {
      font-size: inherit;
    }

    &small {
      font-size: 20px;
    }

    &large {
      font-size: 36px;
    }
  }

  &#{$state} {
    &error {
      color: $cherry600;
    }

    &warning {
      color: $banana400;
    }

    &success {
      color: $kiwi900;
    }

    &disabled {
      color: $neutral400;
    }
  }
}