@mixin borderShadow() {
  box-shadow: 0 -1px 0 var(--calcite-app-border) inset;
}
@mixin borderShadowHover() {
  box-shadow: 0 0 0 2px var(--calcite-app-border-hover) inset;
}
@mixin borderShadowActive() {
  box-shadow: 0 0 0 1px var(--calcite-app-border-active) inset;
}

// place on the element that receives focus style, not in focus
@mixin focus-style-base() {
  outline-offset: 0;
  outline-color: transparent;
  transition: outline-offset var(--calcite-app-animation-time-fast) ease-in-out,
    outline-color var(--calcite-app-animation-time-fast) ease-in-out;
}

// place on the element that receives focus style, while in focus
@mixin focus-style-outset() {
  outline: 2px solid var(--calcite-ui-blue-1);
  outline-offset: 2px;
}

@mixin focus-style-inset() {
  outline: 2px solid var(--calcite-ui-blue-1);
  outline-offset: -2px;
}
