<script lang="ts">
  import type Status from "$lib/models/status";
  import StatusColor from "./StatusColor.svelte";
  import StatusIcon from "./StatusIcon.svelte";
  import StatusText from "./StatusText.svelte";

  export let status: Status
</script>

<div class="entry-status">
  <StatusColor status={status}>
    <StatusIcon status={status} />
    <StatusText status={status} />
  </StatusColor>
</div>

<style lang="scss">
  @import "../colors.sass";

  div.entry-status {
    font-size: 0.75em;
    font-weight: 600;
    opacity: $opacity-entry5;

    :global(.icon) {
      font-size: 0.75em;
    }
  }
</style>
