/*******************************
        Interaction
*******************************/

:root {

  /* -------------------
          Input
  -------------------- */

  /* This is essential to make sure inputs are the same size when used inside each component */
  --input-vertical-padding: var(--relative-10px);
  --input-horizontal-padding: var(--relative-12px);
  --input-padding: var(--input-vertical-padding) var(--input-horizontal-padding);

  /* -------------------
       Transitions
  -------------------- */

  --duration: 0.15s;
  --easing: ease;

  /* --------------
       States
  --------------- */

  /* How to handle dimming recessed/disabled UI */
  --recessed-opacity: 0.4;
  --disabled-opacity: 0.4;

  /* How much to adjust base colors for various states */
  --hover-lightness: 0.05;
  --focus-lightness: -0.05;
  --down-lightness: -0.08;
  --active-lightness: -0.08;
  --link-opacity: 0.6;

  /* --------------
    Focus Outline
  --------------- */

  --focused-ring: 0px 0px 1px 3px var(--standard-100);
  --focused-outline-color: var(--inverted-100);
  --focused-ring-color: var(--primary-color);
  --focused-ring-outline-width: 1px;
  --focused-ring-width: 3px;
  --focused-ring-shadow:
    0px 0px 0px var(--focused-ring-outline-width) var(--focused-outline-color),
    0px 0px 0px var(--focused-ring-width) var(--focused-ring-color)
  ;

}