.widgets 
  .loading-wrap
    margin: 0.5rem 0
    background: var(--bg-a50)

.widgets
  overflow: scroll
  flex-grow: 1
  scrollbar-width: none
  scrollbar(0, 0)
  z-index: 1
  line-height: 1.2
  margin: 0 var(--gap-base)
  .widget-wrapper
    .widget-header
      padding-left: var(--gap-base)
      padding-right: var(--gap-base)
      display: flex
      justify-content: space-between
      align-items: baseline
      line-height: 28px
      font-weight: 500
      font-size: $fs-13
      color: var(--text-p1)
      .item 
        display: block
      >span
        text-align: left
        opacity 0.3
      &:empty
        display: none
      .cap-action
        line-height: 0
        color: inherit
        opacity 0.3
        trans1 opacity
        border-radius: 8px
        padding: 6px
        margin-right: -6px
        svg
          height: 1em
          width: auto
          transform: scale(1.2)
          fill: var(--text-p2)
        &:hover
          color: var(--accent)
          background: var(--ui-item-bg-hover)
          box-shadow: var(--ui-item-shadow-hover)
          opacity 1
          svg
            fill: var(--accent)

    .widget-body
      color: var(--text-p1)
      p
        margin-top: .5em
        margin-bottom: .5em
        line-height: 1.5
      >.ui-collection,
      >.widget-section>.ui-collection
        min-width: 0


.widget-wrapper
  display: block
  margin-top: 32px
  .widget-section+.widget-section
    margin-top: 24px

.widget-wrapper.markdown
  --ui-item-bg: var(--block)

[data-ui-surface='glass'] .widget-wrapper.markdown
  --ui-item-bg: var(--bg-a10)

.l_left .widgets
  padding-bottom: 64px
.l_right .widgets
  padding: 0
  &:empty 
    display: none
  .widget-wrapper:first-child
    margin-top: 0
  .widget-wrapper
    .widget-header
      padding-left: var(--gap-base)
      padding-right: var(--gap-base)
  // 小屏幕
  @media screen and (max-width: $device-laptop)
    padding: var(--gap-base) 0
    .widget-wrapper
      margin-top: var(--gap-base)
      border-radius: $border-card-s
  // 大屏幕
  @media screen and (min-width: $device-laptop)
    .widget-wrapper.markdown .widget-body
      background: var(--block)
