.tabitem,
.gradio-tabitem {
  padding: var(--spacing-lg);
  background: var(--panel-background-fill);
  border: none !important;
  border-radius: var(--container-radius);
}

#tabs {
  > .tabitem.gradio-tabitem {
    padding: 24px;
    background: transparent !important;
  }
}

.tab-nav {
  gap: 8px;
  margin-bottom: 8px;
  border: none !important;

  button {
    cursor: pointer;

    flex: 1 !important;

    padding: 8px !important;

    background: var(--color-fill-quaternary) !important;
    border: none !important;
    border-radius: 4px !important;

    transition: all 0.2s ease-in-out;

    &:hover {
      flex: none;
      color: var(--color-text) !important;
      background: var(--color-fill-tertiary) !important;
      border: none !important;
    }

    &.selected {
      flex: none;

      font-weight: 600;
      color: var(--color-text) !important;

      background: var(--color-fill-secondary) !important;
      border: none !important;
      border-bottom: 2px solid var(--color-primary) !important;
    }
  }
}
