@import url('https://unpkg.com/tachyons@4/css/tachyons.min.css');

:host {
  display: block;
  height: 100%;
}

:host,
input,
button,
select,
textarea {
  font-family: 'Roboto', sans-serif;
}

.zea-tabs {
  color: var(--color-foreground-1);
  display: flex;
  width: 100%;
  height: 100%;
}

.zea-tabs * {
  box-sizing: border-box;
}

.zea-tabs.small {
  font-size: 11px;
}

.zea-tabs {
  flex-direction: column;
}

.zea-tabs.vertical {
  flex-direction: row;
}

.zea-tabs .zea-tabs-bar {
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-grey-3);
}

.zea-tabs.vertical .zea-tabs-bar {
  width: 10em;
  flex-shrink: 0;
  height: auto;
  border-bottom: none;
  border-right: 1px solid var(--color-grey-3);
}

.zea-tabs-content {
  flex-grow: 1;
  padding-top: 1em;
  height: calc(100% - 30px);
}

::slotted(:not([slot='tab-bar'])) {
  display: none;
}

::slotted(.active:not([slot='tab-bar'])) {
  display: block;
  max-height: 100%;
  /*width: min-content;*/
}

::slotted([slot='tab-bar']) {
  font-weight: bold;
  color: var(--color-foreground-1);
  cursor: pointer;
  display: inline-block;
  padding: 1em 1em 0.5em;
}

.small ::slotted([slot='tab-bar']) {
  padding: 0.5em 1em 0.5em;
}

::slotted([slot='tab-bar']:hover) {
  color: var(--color-secondary-1);
}

::slotted(.active[slot='tab-bar']) {
  border-bottom: 0.2em solid var(--color-secondary-1);
  color: var(--color-secondary-1);
}

.vertical ::slotted([slot='tab-bar']) {
  border-bottom: none;
  border-left: 0.3em solid transparent;
  padding: 1.4em 1em;
}

.vertical ::slotted(.active[slot='tab-bar']) {
  border-bottom: none;
  border-left: 0.3em solid var(--color-secondary-1);
}

.vertical .zea-tabs-bar {
  padding-top: 2em;
  padding-left: 0;
}