/* Drawers, loading masks, descriptions, trees, and empty states. */

.el-drawer {
  border-radius: var(--app-radius-base);
  box-shadow: var(--app-shadow-md);
  border: 1px solid var(--app-surface-border);
}

.el-drawer__header {
  margin-bottom: 0;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--app-surface-border);
  background: var(--app-elevated-soft-bg);
  color: var(--app-text-title);
}

.el-drawer__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--app-text-title);
}

.el-drawer__body {
  padding: 18px 20px 20px;
}

.el-drawer__close-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--app-elevated-close-bg);
  color: var(--app-text-muted);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;

  &:hover {
    background: var(--app-elevated-close-hover-bg);
    color: var(--app-accent-strong);
    transform: translateY(-1px);
  }
}

.el-loading-mask {
  background: color-mix(in srgb, var(--app-surface-bg) 82%, transparent);
  backdrop-filter: blur(4px);
}

.el-loading-spinner .path {
  stroke: var(--app-accent-strong);
}

.el-descriptions {
  --el-descriptions-table-border: var(--app-surface-border);
}

.el-descriptions__body .el-descriptions__table {
  border-radius: 12px;
  overflow: hidden;
}

.el-descriptions__label.el-descriptions__cell {
  background: var(--app-elevated-soft-bg) !important;
  color: var(--app-text-title);
  font-weight: 600;
}

.el-descriptions__content.el-descriptions__cell {
  color: var(--app-text-title);
}

.el-tree {
  color: var(--app-text-title);
  background: transparent;
}

.el-tree-node__content {
  min-height: 34px;
  margin: 2px 0;
  border-radius: 10px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.el-tree-node__content:hover,
.el-tree-node.is-current > .el-tree-node__content {
  background: var(--app-accent-soft);
}

.el-empty__image {
  opacity: 0.9;
}

.el-empty__description p {
  color: var(--app-text-muted);
}

.el-color-dropdown {
  border-radius: var(--app-radius-base);
  border: 1px solid var(--app-surface-border);
  box-shadow: var(--app-shadow-md);
}