/* button.st.css */
@namespace "Button";

/* = Project and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    --border-radius-lg,
    --background-hover-color,
    --base-font-size,
    --base-font-size-sm,
    --base-font-size-md,
    --base-font-size-lg,
    --font-family-base,
    --color-accent-1,
    --color-accent-2,
    --color-accent-3,
    --color-error,
    --color-valid,
    --color-warn,
    --color-ui,
    --color-ui-alpha1,
    --color-ui-inverse;
}

/* = Import Root Component CSS API */
:import {
  -st-from: "../../components/Button/button.st.css";
  -st-default: Button;
}

/* = Import Button Mixin */
:import {
  -st-from: "../../mixins/buttonMixin.st.css";
  -st-default: ButtonMixin;
  -st-named:
    --bg-color,
    --border-color,
    --text-color,
    --accent-color,
    filledBtn,
    hollowBtn,
    linkBtn;
}

@st-scope Base {
  Button {
    /* Reassign the mixins default border-radius to a CSS3 var so to keep the switcher working. */
    -st-mixin: ButtonMixin(border-radius var(--border-radius-lg));
  }

  /**
   * = Sizes
   *
   * xs and xl currently undefined and not provided for in the base-font-xx pattern. 
   * Consider revising?
   */
  Button:size(sm) {
    font-size: var(--base-font-size-sm);
  }

  Button:size(md) {
    font-size: var(--base-font-size-md);
  }

  Button:size(lg) {
    font-size: var(--base-font-size-lg);
  }

  /** 
   * Variants
   * 
   * The shipped button.st.css has some local variables set 
   * allowing us to reassign the color value by way of a var
   * at source rather having to deal with overriding it.
   *
   * We then use the accent var that we added in this file
   * as an argument to change the accent which means we save a load
   * of color and variant specific styles. 
   */
  /* = Variant: 'Primary' - filled design */
  Button:variant(primary) {
    -st-mixin: filledBtn(bg-hover var(--background-hover-color),
        text-hover var(--color-accent-1));
    --text-color: var(--color-ui-inverse);
  }

  /* = Variant: 'Secondary' - hollow/bordered design */
  Button:variant(secondary) {
    -st-mixin: hollowBtn(bg-hover var(--background-hover-color),
        text-hover var(--color-accent-1));
  }

  /* = Variant: 'Link' - visually like a link. */
  Button:variant(link) {
    -st-mixin: linkBtn;
  }

  /* Disabled for link button */
  Button:variant(link):disabled {
    --text-color: var(--color-ui-alpha1);
  }

  /** 
   * Tones/Colours
   *
   * We assign the accent var that we added in this file
   * which allows it to be used in differenrt ways within 
   * the variants.
   */
  Button:tone(accent1) {
    --accent-color: var(--color-accent-1);
  }

  Button:tone(accent2) {
    --accent-color: var(--color-accent-2);
  }

  Button:tone(accent3) {
    --accent-color: var(--color-accent-3);
  }

  Button:tone(valid) {
    --accent-color: var(--color-valid);
  }

  Button:tone(warn) {
    --accent-color: var(--color-warn);
  }

  Button:tone(error) {
    --accent-color: var(--color-error);
  }
}