// compile

:root {
  --md-dark-text-primary: rgba(0, 0, 0, .87);
  --md-dark-text-secondary: rgba(0, 0, 0, .54);
  --md-dark-text-disabled: rgba(0, 0, 0, .38);
  --md-dark-icon-active: rgba(0, 0, 0, .54);
  --md-dark-icon-inactive: rgba(0, 0, 0, .38);
  --md-dark-divider: rgba(0, 0, 0, .12);
  --md-dark-status-bar: #000000;
  --md-dark-app-bar: #212121;
  --md-dark-background: #303030;
  --md-dark-card: #424242;
  --md-dark-button-pressed: rgba(153, 153, 153, .40);
  --md-light-text-primary: rgba(255, 255, 255, 1);
  --md-light-text-secondary: rgba(255, 255, 255, .7);
  --md-light-text-disabled: rgba(255, 255, 255, .5);
  --md-light-icon-active: rgba(255, 255, 255, 1);
  --md-light-icon-inactive: rgba(255, 255, 255, .5);
  --md-light-divider: rgba(255, 255, 255, .12);
  --md-light-status-bar: #E0E0E0;
  --md-light-app-bar: #F5F5F5;
  --md-light-background: #FAFAFA;
  --md-light-card: #FFFFFF;
  --md-light-button-pressed: rgba(204, 204, 204, .25);
  --md-light-primary-color: var(--md-indigo-100);
  --md-primary-color: var(--md-indigo-500);
  --md-dark-primary-color: var(--md-indigo-700);
  --md-primary-text-on-light-primary-color: var(--md-primary-text-on-indigo-100);
  --md-primary-text-on-primary-color: var(--md-primary-text-on-indigo-500);
  --md-primary-text-on-dark-primary-color: var(--md-primary-text-on-indigo-700);
  --md-secondary-text-on-light-primary-color: var(--md-secondary-text-on-indigo-100);
  --md-secondary-text-on-primary-color: var(--md-secondary-text-on-indigo-500);
  --md-secondary-text-on-dark-primary-color: var(--md-secondary-text-on-indigo-700);
  --md-active-icon-on-light-primary-color: var(--md-active-icon-on-indigo-100);
  --md-active-icon-on-primary-color: var(--md-active-icon-on-indigo-500);
  --md-active-icon-on-dark-primary-color: var(--md-active-icon-on-indigo-700);
  --md-inactive-icon-on-light-primary-color: var(--md-inactive-icon-on-indigo-100);
  --md-inactive-icon-on-primary-color: var(--md-inactive-icon-on-indigo-500);
  --md-inactive-icon-on-dark-primary-color: var(--md-inactive-icon-on-indigo-700);
  --md-light-accent-color: var(--md-pink-a100);
  --md-accent-color: var(--md-pink-a200);
  --md-dark-accent-color: var(--md-pink-a400);
  --md-primary-text-on-light-accent-color: var(--md-primary-text-on-pink-a100);
  --md-primary-text-on-accent-color: var(--md-primary-text-on-pink-a200);
  --md-primary-text-on-dark-accent-color: var(--md-primary-text-on-pink-a400);
  --md-secondary-text-on-light-accent-color: var(--md-secondary-text-on-pink-a100);
  --md-secondary-text-on-accent-color: var(--md-secondary-text-on-pink-a200);
  --md-secondary-text-on-dark-accent-color: var(--md-secondary-text-on-pink-a400);
  --md-active-icon-on-light-accent-color: var(--md-active-icon-on-pink-a100);
  --md-active-icon-on-accent-color: var(--md-active-icon-on-pink-a200);
  --md-active-icon-on-dark-accent-color: var(--md-active-icon-on-pink-a400);
  --md-inactive-icon-on-light-accent-color: var(--md-inactive-icon-on-pink-a100);
  --md-inactive-icon-on-accent-color: var(--md-inactive-icon-on-pink-a200);
  --md-inactive-icon-on-dark-accent-color: var(--md-inactive-icon-on-pink-a400);
}

.md-header.md-light,
.md-light-theme {
  --md-primary-text: var(--md-dark-text-primary);
  --md-secondary-text: var(--md-dark-text-secondary);
  --md-disabled-text: var(--md-dark-text-disabled);
  --md-active-icon: var(--md-dark-icon-active);
  --md-inactive-icon: var(--md-dark-icon-inactive);
  --md-divider: var(--md-dark-divider);
  --md-status-bar: var(--md-light-status-bar);
  --md-app-bar: var(--md-light-app-bar);
  --md-background: var(--md-light-background);
  --md-card: var(--md-light-card);
  --md-button-pressed: var(--md-dark-button-pressed);
}

.md-dark-theme,
.md-header.md-dark {
  --md-primary-text: var(--md-light-text-primary);
  --md-secondary-text: var(--md-light-text-secondary);
  --md-disabled-text: var(--md-light-text-disabled);
  --md-active-icon: var(--md-light-icon-active);
  --md-inactive-icon: var(--md-light-icon-inactive);
  --md-divider: var(--md-light-divider);
  --md-status-bar: var(--md-dark-status-bar);
  --md-app-bar: var(--md-dark-app-bar);
  --md-background: var(--md-dark-background);
  --md-card: var(--md-dark-card);
  --md-button-pressed: var(--md-light-button-pressed);
}

.md-colored {
  --md-primary-text: var(--md-primary-text-on-primary-color);
  --md-secondary-text: var(--md-secondary-text-on-primary-color);
  --md-disabled-text: var(--md-disabled-text-on-primary-color);
  --md-active-icon: var(--md-active-icon-on-primary-color);
  --md-inactive-icon: var(--md-inactive-icon-on-primary-color);

  & + .md-content .md-empty-header-extension,
  & + .md-content .md-header-extension,
  &.md-header {
    --md-status-bar: var(--md-dark-primary-color);
    --md-app-bar: var(--md-primary-color);
    --md-primary-text: var(--md-primary-text-on-primary-color);
    --md-secondary-text: var(--md-secondary-text-on-primary-color);
    --md-disabled-text: var(--md-disabled-text-on-primary-color);
    --md-active-icon: var(--md-active-icon-on-primary-color);
    --md-inactive-icon: var(--md-inactive-icon-on-primary-color);
  }
}

.md-primary {
  color: var(--md-primary-text) !important;
}

.md-secondary {
  color: var(--md-secondary-text) !important;
}

.md-disabled {
  color: var(--md-disabled-text) !important;
}

.md-active {
  color: var(--md-active-icon);
}

.md-inactive {
  color: var(--md-inactive-icon);
}