/**
 * Gaia Tabs
 *
 * Tabs allow users to navigate between
 * multiple views within a single screen.
 */

gaia-tabs {
  display: flex;
  position: absolute;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  z-index: 0;
  background: #fff;
  border-top: 0.1rem solid #e7e7e7;
}

/**
 * [position="top"]
 */

gaia-tabs[position="top"] {
  top: 0;
  bottom: auto;
  height: 4rem;
  border-top: none;
  border-bottom: 0.1rem solid #e7e7e7;
}

/**
 * [skin="dark"]
 */

gaia-tabs[skin="dark"] {
  border-color: rgba(189,189,189, 0.1);
}

/** Tab
 ---------------------------------------------------------*/

gaia-tabs > * {
  box-sizing: content-box;
  position: relative;
  margin: 0;
  padding: 0;
  height: 4.5rem;
  border: 0;
  flex: 1 1 0;
  font-size: 1.6rem;
  line-height: 4.5rem;
  text-align: center;
  font-family: sans-serif;
  text-decoration: none;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
  list-style: none;
}

gaia-tabs a {
  text-decoration: none;
  color: inherit;
}

/**
 * [position="top"]
 */

gaia-tabs[position="top"] > * {
  height: 4.1rem;
}

/**
 * [skin="dark"]
 */

gaia-tabs[skin="dark"] > * {
  background-color: #000;
  color: #fff;
}

/**
 * :active
 */

gaia-tabs > :active {
  border-radius: 0;
  background-color: #b2f2ff;
}

/**
 * .selected
 */

gaia-tabs > .selected {
  color: #00aacc;
}

/**
 * .selected &
 * [skin="dark"]
 */

gaia-tabs[skin="dark"] > .selected {
  color: #00aacc;
}

/**
 * [disabled]
 */

gaia-tabs > [disabled] {
  color: #333;
  opacity: 0.25;
  pointer-events: none;
}

/**
 * [skin="dark"] &
 * [disabled]
 */

gaia-tabs[skin="dark"] > [disabled] {
  color: rgba(255,255,255,0.4);
  opacity: 1;
}

/** Tab Bottom Border
 ---------------------------------------------------------*/

gaia-tabs > .selected:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-bottom: 0.3rem solid #00aacc;
}


/**
 * [underline="child"]
 * For this option we need a child element
 * inside tabs, e.g:
 * <gaia-tabs>
 *   <button><span>Text</span></button>
 * </gaia-tabs>
 */

gaia-tabs[underline="child"] > .selected:after {
  display: none;
}

gaia-tabs[underline="child"] > .selected > :after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-bottom: 0.3rem solid #00aacc;
}

gaia-tabs[underline="child"] > .selected > * {
  position: relative;
  display: inline-block;
  height: 100%;
}