@charset "UTF-8";

:root {
  --md-tabs-bg: #f3f3f3;
  --md-tabs-hover-bg: #e9e9e9;
  --md-tabs-active-bg: #ffffff;

  --md-tabs-text: #222222;
  --md-tabs-active-text: #000000;

  --md-tabs-border: #cccccc;

  --md-tabs-padding-y: 0.75em;
  --md-tabs-padding-x: 1.25em;

  --md-tabs-radius: 0;

  --md-tabs-content-bg: #ffffff;
  --md-tabs-content-text: inherit;
  --md-tabs-content-border: #cccccc;
  --md-tabs-content-padding: 1.5em;
  --md-tabs-content-radius: 0;
  --md-tabs-content-top-gap: 0;
}

/* -------------------------
   Tabs Row
------------------------- */

.md-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.md-tabs li {
  cursor: pointer;
  background: var(--md-tabs-bg, #f3f3f3);
  color: var(--md-tabs-text, #222222);
  border: 1px solid var(--md-tabs-border, #cccccc);
  padding: var(--md-tabs-padding-y, 0.75em) var(--md-tabs-padding-x, 1.25em);
  margin: 0;
  transition: background 0.2s ease;
}

.md-tabs li:hover {
  background: var(--md-tabs-hover-bg, #e9e9e9);
}

.md-tabs li.active {
  background: var(--md-tabs-active-bg, #ffffff);
  color: var(--md-tabs-active-text, #000000);
}

/* -------------------------
   Content Panels
------------------------- */

.md-tabs-content {
  display: none;
  background: var(--md-tabs-content-bg, #ffffff);
  color: var(--md-tabs-content-text, inherit);
  border: 1px solid var(--md-tabs-content-border, #cccccc);
  padding: var(--md-tabs-content-padding, 1.5em);
  border-radius: var(--md-tabs-content-radius, 0);
  margin-top: var(--md-tabs-content-top-gap, 0);
}

.md-tabs-content.active {
  display: block;
}