/**
 * @file
 * Visual styles for tabs.
 */
nav.tabs {
  padding: var(--sp);
}

div.tabs {
  margin: 1em 0;
}
ul.tabs {
  margin: 0 0 0.5em;
  padding: 0;
  list-style: none;
  border-bottom: solid 2px var(--color-primary);
}
.is-gutenberg ul.tabs {
  border-bottom: none;
}

.tabs > li {
  display: inline-block;
  margin-right: 0.3em; /* LTR */
}
[dir="rtl"] .tabs > li {
  margin-right: 0;
  margin-left: 0.3em;
}
.tabs a {
  display: block;
  text-decoration: none;
}
.is-gutenberg .tabs a {
  font-size: var(--font-size-s);
  list-style: 16px;
  background-color: rgba(247, 244, 255, 1);
  border-radius: 4px;
  border: solid 1px rgba(198, 185, 231, 1);
  margin-bottom: 20px;
  text-align: center;
  color: var(--color-text);
  width: 160px;
}
.tabs a.is-active {
  color: var(--color-light);
  background-color: var(--color-primary);
}
.tabs a:focus:not(.is-active),
.tabs a:hover:not(.is-active) {
  background-color: var(--color-secondary);
  color: var(--color-dark);
}

.is-gutenberg nav.tabs {
  position: fixed;
  right: 0;
  z-index: 2;
}

.is-gutenberg ul.tabs {
  display: flex;
  flex-direction: row;
  flex-direction: column;
}

@media (min-width: 768px) {
  .tabs a {
    padding: var(--sp0-5);
  }  
}