/* = Project info and vars. */
:import {
  -st-from: "./project.st.css";
  -st-default: Arts;
}

/* Colors from base vars. */
:import {
  -st-from: "../base/project.st.css";
  -st-named:
    --color-accent-3,
    --color-ui-inverse;
}

/* CSS API from component directory. */
:import {
  -st-from: "../../components/Alert/alert.st.css";
  -st-default: Alert;
}

/* Get the alert var referances we have defined in our base theme. */
:import {
  -st-from: "../base/alert.st.css";
  -st-named:
    /* fyi: possible to use 'as' for st-named: e.g '--bg-color as --alert-background;' */
    --bg-color,
    --foreground-color;
}

@st-scope Arts {
  Alert {
    /* Assign the color changes for arts. */
    --bg-color: var(--color-accent-3);
    --foreground-color: var(--color-ui-inverse);
  }
}