// compile
:root {
  --md-mobile-app-bar-height: 56px;
  --md-mobile-side-margin: 16px;
  --md-mobile-content-margin: 72px;

  --md-mobile-tab-padding: 12px;
  --md-mobile-tab-grow: 1;

  --md-tablet-app-bar-height: 64px;
  --md-tablet-side-margin: 24px;
  --md-tablet-content-margin: 80px;

  --md-tablet-tab-padding: 24px;
  --md-tablet-tab-grow: 0;

  --md-status-bar-height: 24px;
  --md-content-space: 8px;

  --md-app-bar-height: var(--md-mobile-app-bar-height);
  --md-side-margin: var(--md-mobile-side-margin);
  --md-content-margin: var(--md-mobile-content-margin);

  --md-tab-padding: var(--md-mobile-tab-padding);
  --md-tab-grow: var(--md-mobile-tab-grow);
}

@media only screen and (min-width: 960px) {
  :root {
    --md-app-bar-height: var(--md-tablet-app-bar-height);
    --md-side-margin: var(--md-tablet-side-margin);
    --md-content-margin: var(--md-tablet-content-margin);

    --md-tab-padding: var(--md-tablet-tab-padding);
    --md-tab-grow: var(--md-tablet-tab-grow);
  }
}