/**
 * Basic styles for responsive tabs/accordion.
 *
 * The basic CSS is in the module, but skinning / theming with colors etc should
 * happen in site-specific theme CSS.
 */

/* LIST RESET */

.ef_tabs > ul {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

.ef_tabs > ul > li {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

/* TABS LAYOUT */

.ef_tabs.__tabs-vertical {
  display: flex;
}

/* TABS CONTROLS */

.ef_tabs > ul.__controls-horizontal {
  display: flex;
}

.ef_tabs > ul.__controls > li.__inactive {
  cursor: pointer;
}

.ef_tabs > ul.__controls > li.__active {
  /* Cheapest way to make the active tab stick out. */
  border: 1px solid black;
}

.ef_tabs.__accordion > ul.__controls {
  /* Hide tab controls when in accordion mode. */
  display: none !important;
}

/* ACCORDION MECHANISM */

.ef_tabs.__tabs > .__sections > section.__inactive {
  /* Hide inactive tab completely when in tabs mode. */
  display: none;
}

.ef_tabs.__tabs > .__sections > section > .__title {
  /* Hide accordion controls when in tabs mode. */
  display: none;
}

.ef_tabs > .__sections > section > .__title {
  /* Cheapest way to make the accordion labels stick out. */
  border: 1px solid black;
  cursor: pointer;
  /* Eliminate margins on the accordion labels. */
  margin: 0;
}

.ef_tabs.__accordion > .__sections > section.__accordion_inactive > .__content {
  /* Hide inactive tab contents when in accordion mode. */
  display: none;
}

/* TAB CONTENT PADDING */

.ef_tabs > .__sections > section > .__content {
  overflow: hidden;
  /* Padding interferes with the max-height sliding transition. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  /* Transition duration and type can be overridden in theme CSS. */
  transition: max-height 1s;
}

/*
 * Replace the padding with "inwards margin" trick.
 *
 * These inwards margins nicely collapse with the margin of contained elements,
 * and they don't interfere with the max-height sliding transition.
 *
 * This is a stub implementation, overwrite in custom CSS.
 */
.ef_tabs > .__sections > section > .__content::before {
  content: '';
  display: block;
  margin-bottom: 1em;
  /* Prevent outer margin collapse. */
  padding-top: 1px;
  margin-top: -1px;
}

.ef_tabs > .__sections > section > .__content::after {
  content: '';
  display: block;
  margin-top: 1em;
  /* Prevent outer margin collapse. */
  padding-bottom: 1px;
  margin-bottom: -1px;
}