/*
* Tabs styles
*/

/* outer container */
div.group-tabs
  { display: block; width: 100%; margin: 1em 0; }

/* nav */
div.group-tabs nav.group-tabs-nav
  { display: block; width: 100%; border-bottom: 3px solid var(--color-accent); padding: 0 .25em; }

/* nav items */
div.group-tabs nav.group-tabs-nav button.group-tabs-nav-item
  { display: inline-block; vertical-align: middle; padding: .5em 1em; text-align: center; cursor: pointer; border-radius: .15em .15em 0 0; border: none; background: none; font-size: .75em; text-transform: uppercase; font-weight: 600; color: var(--color-text); }

/* active nav item */
div.group-tabs nav.group-tabs-nav button.group-tabs-nav-item.active
  { font-weight: bold; cursor: default; background-color: var(--color-accent); color: #ffffff; }

/* hover */
div.group-tabs nav.group-tabs-nav button.group-tabs-nav-item:hover
  { background-color: var(--color-accent-5); }
div.group-tabs nav.group-tabs-nav button.group-tabs-nav-item.active:hover
  { background-color: var(--color-accent); }

/* content area */
div.group-tab-panel
  { display: none; padding: 2em 1em; }
div.group-tab-panel.active
  { display: block; }

/*
* Tabs item width based on number of items
*/
div.group-tabs nav.group-tabs-nav[data-count="2"] button.group-tabs-nav-item
  { width: 50%; }
div.group-tabs nav.group-tabs-nav[data-count="3"] button.group-tabs-nav-item
  { width: 33.333%; }
div.group-tabs nav.group-tabs-nav[data-count="4"] button.group-tabs-nav-item
  { width: 25%; }
div.group-tabs nav.group-tabs-nav[data-count="5"] button.group-tabs-nav-item
  { width: 20%; }
div.group-tabs nav.group-tabs-nav[data-count="6"] button.group-tabs-nav-item
  { width: 16.666%; }