<template>
  <svg
    class="error-icon"
    viewBox="0 0 32 32"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M16 0C7.168 0 0 7.168 0 16C0 24.832 7.168 32 16 32C24.832 32 32 24.832 32 16C32 7.168 24.832 0 16 0ZM17.5998 24.0001H14.3998V20.8001H17.5998V24.0001ZM14.3998 17.6H17.5998V8H14.3998V17.6Z"
      :fill="hasLightTheme ? 'white' : '#CB1010'"
    />
  </svg>
</template>

<script lang="ts">
export default {
  props: {
    hasLightTheme: {
      type: Boolean,
      default: false,
    },
  },
}
</script>

<style scoped>
.error-icon {
  display: inline-block;
  margin: 0 0 2px 3px;
  width: 10px;
  height: 10px;
}
</style>
