<template>
  <n-tabs type="segment" size="large" v-bind="$attrs">
    <slot></slot>
  </n-tabs>
</template>

<script setup lang="ts">
import { NTabs } from 'naive-ui'

</script>

<style scoped lang="less">
.n-tabs {
  --n-tab-height: 50px;
  --n-tab-text-color-active: #18a058 !important;
  --n-tab-text-color-hover: #18a058 !important;
  
  position: relative;
  // height: 100%;
  min-height: var(--n-tab-height);

  :deep(.n-tabs-nav) {
    position: absolute;
    height: var(--n-tab-height);
    left: 0;
    right: 0;
    bottom: 0;

    .n-tabs-tab--active {
      background-color: inherit !important;
      box-shadow: inherit !important;
    }
  }

  :deep(.n-tab-pane) {
    position: absolute;
    padding: 0;
    top: 0;
    bottom: var(--n-tab-height);
    overflow: auto;
  }
}

</style>