<template>
  <div class="setting-group">
    <div class="section-header">{{ title }}</div>
    <div class="settings-section">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    required: true,
  },
})
</script>

<style scoped lang="less">
.setting-group {
  .section-header {
    font-size: 0.75rem;
    color: rgb(95 95 95);
    padding: 0.3125rem 0.5rem;
    width: 95%;
    margin: 0.75rem auto 0 auto;
    box-sizing: border-box;
  }

  .settings-section {
    width: 95%;
    border-radius: 0.625rem;
    overflow: hidden;
    margin: 0 auto;
    border: 1px solid var(--divider);
    box-shadow: 0 1.25rem 3.125rem 0rem rgb(0 0 0 / 5%);
    /* 确保不会阻止事件传播 */
    pointer-events: auto;
  }
}

:global(.settings-item) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to bottom, #fefdfe, #fcfbfb);
  padding: 0.875rem 1rem;
}

:global(.settings-item-border) {
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}

:global(.settings-item-border:first-child) {
  border: none;
}

:global(.settings-item-border:last-child) {
  border: none;
}

:global(.settings-item-clickable) {
  cursor: pointer;
}

:global(.settings-item-clickable .item-text-primary) {
  flex: 1;
}

:global(.settings-item-clickable) {
  display: flex;
  align-items: center;
}
</style>
