/* Tabs */
nav.tabs__nav {
  flex-flow: column;
  gap: 0;
  margin: 0 var(--b-radius-l);
}

.tabs__button {
  border: none;
  color: rgb(var(--c-primary));
  background: transparent;
  border-radius: 0;
  font-weight: var(--f-weight-sb);
  box-shadow: inset 0 -4px 0 0 rgb(var(--c-primary-lighter));
  flex: 1;
  text-transform: uppercase;
  padding: .5em 0 1em 0;
  position: relative;
  z-index: 10;

  & .font__fas {
    display: none;
  }
}

.tabs__button.-active {
  box-shadow: inset 0 -4px 0 0 rgb(var(--c-primary-light));
}

@media (hover: hover) {
  .tabs__button:hover {
    box-shadow: inset 0 -4px 0 0 rgb(var(--c-primary-light));
  }
}

.tabs__content {
  background: rgb(var(--c-neutral-lighter));
  padding: 3rem 2rem;
  border-radius: var(--b-radius-l);
  position: relative;
  overflow: hidden;
  margin-top: 0 !important;
}

.tabs__content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgb(var(--c-primary-lighter));
  z-index: 0;
}


/* Accordion vertical */
.accordion.-vertical .accordion__item:not(:first-child) .accordion__header {
  margin-top: var(--g-gap-s);
}

.accordion.-vertical .accordion__item {
  background: transparent;
}

.accordion.-vertical .accordion__content {
  padding: 1.2rem;
  background: rgb(var(--c-neutral-lighter));
  border-bottom-left-radius: var(--b-radius-l);
  border-bottom-right-radius: var(--b-radius-l);
}

.accordion.-vertical .accordion__button {
  background: transparent;
  color: rgb(var(--c-primary));
  border-radius: 0;
  font-weight: var(--f-weight-sb);
  border: none;
  box-shadow: inset 0 -4px 0 0 rgb(var(--c-primary-lighter));
}

.accordion.-vertical .accordion__button[aria-expanded=true] {
  box-shadow: inset 0 -4px 0 0 rgb(var(--c-primary-light));
}

.accordion.-vertical .accordion__header::after {
  color: rgb(var(--c-neutral-darker));
}

/* Accordion horizontal */
.accordion.-horizontal .accordion__content {
  padding: 2rem;
}

.accordion.-horizontal .accordion__headertext {
  font-size: var(--f-size-l-3);
  font-weight: var(--f-weight-sb);
}

.accordion.-horizontal .accordion__button {
  background-color: rgb(var(--c-primary));
  color: rgb(var(--c-neutral-lightest));
}

.accordion.-horizontal .accordion__button {
  background: transparent;
  color: rgb(var(--c-primary));
  border: 2px solid rgb(var(--c-primary));
  font-weight: var(--f-weight-sb);
}

.accordion.-horizontal .accordion__buttontext {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1.5rem 2rem;
  width: 100%;
  height: 100%;
  hyphens: none;
}

.accordion.-horizontal .accordion__header.-active + .accordion__content {
  background: rgb(var(--c-primary));
  color: rgb(var(--c-neutral-lightest));
  border-radius: var(--b-radius-l);
  overflow: hidden;
}

.accordion.-horizontal .accordion__header.-active + .accordion__content h2,
.accordion.-horizontal .accordion__header.-active + .accordion__content h3,
.accordion.-horizontal .accordion__header.-active + .accordion__content h4,
.accordion.-horizontal .accordion__header.-active + .accordion__content a {
  color: rgb(var(--c-neutral-lightest));
}

/* =============================================================================
   Media Queries
   ========================================================================== */

@media (min-width: 800px) {
  /* Tabs */
  nav.tabs__nav {
    flex-flow: row;
  }

  .tabs__button {
    margin-bottom: -4px;

    & .font__fas {
      display: block;
      font-size: 34px;
      color: rgb(var(--c-primary-light));
      margin-bottom: 5px;
    }
  }

  /* Accordion horizontal */
  .accordion.-horizontal .accordion__buttontext {
    padding: 2rem 0.5rem;
  }
}