/**
 * YcDialog 对话框组件样式
 */
/* Combine class and attribute selector for robustness */
/* Mixin for shared dialog styles */
@mixin yc-dialog-base {
  --scrollbar-size: 6px;
  --scrollbar-radius: 3px;
  --scrollbar-thumb-light: rgb(0 0 0 / 20%);
  --scrollbar-thumb-light-hover: rgb(0 0 0 / 30%);
  --scrollbar-thumb-dark: rgb(255 255 255 / 20%);
  --scrollbar-thumb-dark-hover: rgb(255 255 255 / 30%);

  /* Apply to .el-dialog itself */
  &.el-dialog {
    display: flex;
    flex-direction: column;
    max-height: var(--yc-dialog-max-height, 90vh);
    margin: 6vh auto 50px;

    .el-dialog__body {
      display: flex;
      flex: 1;
      flex-direction: column;
      min-height: 0; // Crucial for nested flex scrolling
      overflow-x: hidden;
      overflow-y: auto; // Allow body to scroll if content overflows 
      padding: 0 !important; // Remove padding to let child control spacing if needed, or keep standard padding
    }
  }

  .el-dialog__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    min-height: 0;
  }

  .el-dialog__footer,
  .plus-dialog-footer {
    flex-shrink: 0;
  }

  .el-dialog__title {
    font-weight: 500;
  }

  .el-dialog__header {
    position: relative;
    padding-bottom: 16px;

    .el-dialog__headerbtn {
      top: 0;
      transform: translateY(0);
      width: 16px !important;
      height: 16px !important;
    }

    &::after {
      position: absolute;
      right: 0;
      bottom: 0;
      left: -24px;
      width: calc(100% + 48px);
      height: 1px;
      content: "";
      background-color: #f5f7f9;
    }
  }

  .el-dialog__footer {
    position: relative;

    &::before {
      position: absolute;
      top: 0;
      left: -24px;
      width: calc(100% + 48px);
      height: 1px;
      content: "";
      background-color: #f5f7f9;
    }
  }
}

/* Mixin for content scrollbar styles */
@mixin yc-dialog-content-scroll {
  flex: 1;
  padding: 0;
  overflow: visible; // 不设置滚动，由外层.el-dialog__body统一处理
  min-height: 0;

  &::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-light);
    border-radius: var(--scrollbar-radius);

    &:hover {
      background-color: var(--scrollbar-thumb-light-hover);
    }
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  .dark &::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-dark);

    &:hover {
      background-color: var(--scrollbar-thumb-dark-hover);
    }
  }
}

/* Original class selector */
.yc-dialog {
  @include yc-dialog-base;

  &--no-header-border .el-dialog__header::after {
    display: none;
  }

  &__content {
    @include yc-dialog-content-scroll;
  }
}

/* Attribute selector fallback */
[custom-class~="yc-dialog"] {
  .el-dialog__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0; // Crucial for nested flex scrolling
    overflow-x: hidden;
    overflow-y: auto !important; // Force scrolling, overriding any other rules
    padding: 0 !important;
  }

  @include yc-dialog-base;

  &[custom-class~="yc-dialog--no-header-border"] {
    .el-dialog__header::after {
      display: none;
    }
  }

  .yc-dialog__content {
    @include yc-dialog-content-scroll;
  }
}