<script>
    import Tablericon from "./tablericon.svelte";

  /**
   * @type {string | undefined}
   */
  export let name = undefined;

  /**
   * @type {string}
   */
  export let iconName;

  /**
   * @type {number}
   */
  export let iconSize = 16;

  /**
   * @type {string}
   */
  export let color = "white";

  /**
   * @type {string}
   */
  export let iconColor = "white";

  /**
   * @type {string | undefined}
   */
  export let textStyle = undefined;
</script>

<style type="scss">
  .pair {
    display: flex;
    flex-flow: row nowrap;
    gap: 8px;
    align-items: center;
  }
</style>

<div class="pair" title={name} style="color: {color};">
  <Tablericon name={iconName} size={iconSize} color={iconColor}></Tablericon>
  <span style="color: {color}; {textStyle}"><slot /></span>
</div>
