:root {
  --tabs-border: var(--app-border);
  --tabs-active: var(--app-primary);
  --tabs-muted: var(--app-muted-color);
}

.app-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacing);
}

.app-tabs-nav {
    display: flex;
    border-bottom: 1px solid var(--tabs-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-block-start: 2px;
    padding-left: 2px;
}

.app-tabs-nav button,
.app-tabs-nav a {
  background: transparent;
  border: 0;
  padding: 5px 10px 5px 10px;
  color: var(--tabs-muted) !important;
  cursor: pointer;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  border-radius: 0;
  margin-bottom: 0;
}

.app-tabs-nav button:hover,
.app-tabs-nav button:focus-visible,
.app-tabs-nav a:hover,
.app-tabs-nav a:focus-visible {
  --app-color: inherit;
  color: var(--app-color) !important;
}

.app-tabs-nav button.is-active,
.app-tabs-nav a.is-active {
  --app-color: inherit;
  color: var(--app-color) !important;
  border-color: var(--tabs-active);
}

[data-tab-panel][hidden] {
  display: none;
}