/* chip.st.css */
@namespace "Chip";

/* = Project and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    --spacing-unit,
    --color-accent-1,
    --color-selected,
    --color-ui-inverse;
}

:import {
  -st-from: "../../components/Chip/chip.st.css";
  -st-default: Chip;
}

:import {
  -st-from: "../../mixins/buttonMixin.st.css";
  -st-default: ButtonMixin;
  -st-named:
    --accent-color,
    --text-color;
}

@st-scope Base {

  /* Can the chip not be the chipButton? Do we need the span? */
  Chip::chipButton:variant(primary) {
    --accent-color: var(--color-selected);
    --text-color: var(--color-accent-1);
    position: relative;
    margin: 0 var(--spacing-unit);
    white-space: nowrap;
    border-width: 1px;
  }

  Chip::chipButton:variant(primary):selected {
    --accent-color: var(--color-accent-1);
    --text-color: var(--color-ui-inverse);
  }

  Chip::chipButton:variant(primary):hover:not(:disabled),
  Chip::chipButton:variant(primary):focus:not(:disabled) {
    --text-color: var(--color-accent-1);
  }

  Chip::icon {
    position: absolute;
    top: 13px;
    left: 15px;
  }

  Chip::icon svg {
    width: 17px;
    height: 17px;
  }
}