// Material Design Default Theme
// --------------------------------------------------
// This file should only contain variables that are
// used to theme the application colors for Material
// Design.

// Material Design General Colors
// --------------------------------------------------
$backdrop-md-color: var(--ion-backdrop-color, #000);
$border-md-color: var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, #c1c4cd)));
$overlay-md-background-color: var(--ion-overlay-background-color, var(--ion-background-color, #fff));

// Material Design Tabs & Tab bar
// --------------------------------------------------
$tabbar-md-background: var(--ion-tab-bar-background, $background-color);
$tabbar-md-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff));
$tabbar-md-border-color: var(
  --ion-tab-bar-border-color,
  var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.07))))
);
$tabbar-md-color: var(--ion-tab-bar-color, $text-color-step-350);
$tabbar-md-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base));

// Material Design Toolbar
// --------------------------------------------------
$toolbar-md-background: var(--ion-toolbar-background, $background-color);
$toolbar-md-border-color: var(--ion-toolbar-border-color, $border-md-color);
$toolbar-md-color: var(--ion-toolbar-color, var(--ion-text-color, #424242));

// Material Design List & List Items
// --------------------------------------------------
$item-md-background: var(--ion-item-background, $background-color);
$item-md-border-color: var(
  --ion-item-border-color,
  var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13))))
);
$item-md-color: var(--ion-item-color, $text-color);

// Material Design Card
// --------------------------------------------------
$card-md-background: var(--ion-card-background, $item-md-background);
$card-md-color: var(--ion-card-color, var(--ion-item-color, $text-color-step-450));

// Material Design Form Controls
// --------------------------------------------------
/// This value comes from the Material Design spec:
/// https://m3.material.io/components/text-fields/specs
$form-control-md-disabled-opacity: 0.38;