/**
 * @file
 * Visual styles for tabs.
 */

div.tabs,
ul.tabs {
  display   : flex;
  margin    : var(--margin-md) 0;
  padding   : 0 var(--margin-md);
  list-style: none;
}

.tabs>li {
  display     : inline-block;
  margin-right: var(--margin-xxxs);
}

.tabs a,
.tabs a:visited {
  display         : block;
  padding         : var(--margin-xxxs) var(--margin-xxs);
  text-decoration : none;
  background-color: var(--univ-primary);
  color           : var(--main-bg);
  border-radius   : var(--rounding);
  border-style    : solid;
  border-color    : var(--main-bg);
  font-size       : var(--font-size-md);
  font-weight     : var(--font-weight-bold);
}

.tabs li.is-active a {
  background-color: var(--main-bg);
  color           : var(--univ-secondary);
  border-color    : var(--univ-secondary);
}

.tabs a:focus,
.tabs a:hover {
  border-style: double;
}