::-webkit-scrollbar {
    height: 1rem;
    width: .5rem
}

::-webkit-scrollbar:horizontal {
    height: .5rem;
    width: 1rem
}

::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 9999px
}


::-webkit-scrollbar-thumb {
    --tw-bg-opacity: 1;
    background-color: rgb(55 55 61 / 80%)
}

::-webkit-scrollbar-thumb:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(55 55 61 / 80%)
}
::-webkit-scrollbar-thumb {
    --tw-border-opacity: 1;
        background-color: rgb(55 55 61 / 80%);
    border-color: rgb(55 55 61 / 80%);
    border-radius: 9999px;
    border-width: 1px;
}
@media (min-width: 768px) {
    .scrollbar-trigger ::-webkit-scrollbar-thumb {
        visibility:hidden
    }

    .scrollbar-trigger:hover ::-webkit-scrollbar-thumb {
        visibility: visible
    }
}



/* styles.css */

/* 默认网格布局 */
.grid-container {
  display: grid;
  grid-template-columns: auto 1fr auto; /* 对应 grid-cols-[auto_1fr_auto] */
  grid-template-areas:
    "header header header"
    "leading primary trailing"
    ". . footer";
  cursor: text;
  overflow: clip;
  background-clip: padding-box;
}

/* 子元素网格区域 */
.grid-container > [style*="grid-area: header"] {
  grid-area: header;
}
.grid-container > [style*="grid-area: primary"] {
  grid-area: primary;
  margin-top: -0.625rem; /* -my-2.5 */
  margin-bottom: -0.625rem;
  padding-left: 0.375rem; /* px-1.5 */
  padding-right: 0.375rem;
  display: flex;
  min-height: 3.5rem; /* min-h-14 */
  align-items: center;
  overflow-x: hidden;
}
.grid-container > [style*="grid-area: leading"] {
  grid-area: leading;
  display: flex;
    align-items: end;
    gap: 0.5rem;
}
.grid-container > [style*="grid-area: footer"] {
  grid-area: footer;
  margin: -0.25rem; /* -m-1 */
  max-width: 100%;
  overflow-x: auto;
  padding: 0.25rem; /* p-1 */
}
.grid-container > [style*="grid-area: trailing"] {
  grid-area: trailing;
  display: flex;
  align-items: end;
  gap: 0.5rem; /* gap-2 */
}

/* 展开状态 */
.group1[data-expanded="true"] .grid-container {
  grid-template-areas:
    "header header header"
    "primary primary primary"
    "leading footer trailing";
}

/* 展开状态下的 primary 样式 */
.group[data-expanded="true"] .grid-container > [style*="grid-area: primary"] {
  margin-bottom: 0; /* group-data-expanded/composer:mb-0 */
  padding-left: 0.625rem; /* group-data-expanded/composer:px-2.5 */
  padding-right: 0.625rem;
}

/* 隐藏滚动条 */
[scrollbar-width="none"] {
  scrollbar-width: none;
}
[scrollbar-width="none"]::-webkit-scrollbar {
  display: none;
}