/* 主题设置抽屉 */
.ele-setting-wrapper {
  flex: 1;
  overflow: auto;
  box-sizing: border-box;
  padding: 10px 12px 18px 12px;
}

.ele-setting-wrapper .ele-setting-title {
  font-size: 13px;
  padding: 0 6px;
  margin-bottom: 8px;
  color: var(--ele-text-color-placeholder);
}

/* 主题风格 */
.ele-setting-wrapper .ele-setting-theme {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 0 6px;
}

.ele-setting-wrapper .ele-setting-theme .ele-setting-theme-item {
  flex-shrink: 0;
  width: 73px;
  line-height: 1;
  font-size: 13px;
  margin-bottom: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ele-setting-wrapper .ele-setting-theme .ele-setting-theme-item-cover {
  width: 52px;
  height: 36px;
  font-size: 16px;
  margin-bottom: 12px;
  padding: 14px 0 0 24px;
  background: var(--ele-bg-color-page);
  box-shadow:
    0 0 0 0.8px var(--ele-border-color-light),
    0 0 4px 1px rgba(0, 0, 0, 0.04);
  border-radius: var(--ele-border-radius-base);
  transition: all 0.2s;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.ele-setting-wrapper .ele-setting-theme .ele-setting-theme-item-cover * {
  pointer-events: none;
}

.ele-setting-wrapper .ele-setting-theme .ele-setting-theme-item-cover:hover {
  box-shadow:
    0 0 8px 2px var(--ele-border-color-lighter),
    0 0 0 0.8px var(--ele-border-color-light);
  transform: scale(1.06);
}

.ele-setting-wrapper .ele-setting-theme .ele-setting-theme-item-cover::before,
.ele-setting-wrapper .ele-setting-theme .ele-setting-theme-item-cover::after {
  content: '';
  width: 100%;
  height: 10px;
  background: var(--ele-bg-color);
  transition: background-color 0.2s;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.ele-setting-wrapper .ele-setting-theme .ele-setting-theme-item-cover::after {
  width: 14px;
  height: 100%;
}

.ele-setting-wrapper
  .ele-setting-theme
  .ele-setting-theme-item-cover.ele-setting-side-dark::after,
.ele-setting-wrapper
  .ele-setting-theme
  .ele-setting-theme-item-cover.ele-setting-head-dark::before,
.ele-setting-wrapper
  .ele-setting-theme
  .ele-setting-theme-item-cover.ele-setting-layout-mix::before,
.ele-setting-wrapper
  .ele-setting-theme
  .ele-setting-theme-item-cover.ele-setting-layout-mix::after {
  background: #262626;
}

.ele-setting-wrapper
  .ele-setting-theme
  .ele-setting-theme-item-cover.ele-setting-head-light::before,
.ele-setting-wrapper
  .ele-setting-theme
  .ele-setting-theme-item-cover.ele-setting-head-dark::before,
.ele-setting-wrapper
  .ele-setting-theme
  .ele-setting-theme-item-cover.ele-setting-head-primary::before {
  z-index: 1;
}

.ele-setting-wrapper
  .ele-setting-theme
  .ele-setting-theme-item-cover.ele-setting-side-light::before,
.ele-setting-wrapper
  .ele-setting-theme
  .ele-setting-theme-item-cover.ele-setting-side-dark:not(
    .ele-setting-layout-side
  )::before,
.ele-setting-wrapper
  .ele-setting-theme
  .ele-setting-theme-item-cover.ele-setting-side-primary::before,
.ele-setting-wrapper
  .ele-setting-theme
  .ele-setting-theme-item-cover.ele-setting-head-light::after,
.ele-setting-wrapper
  .ele-setting-theme
  .ele-setting-theme-item-cover.ele-setting-head-dark::after,
.ele-setting-wrapper
  .ele-setting-theme
  .ele-setting-theme-item-cover.ele-setting-head-primary::after {
  opacity: 0.5;
}

.ele-setting-wrapper
  .ele-setting-theme
  .ele-setting-theme-item-cover.ele-setting-head-primary::before,
.ele-setting-wrapper
  .ele-setting-theme
  .ele-setting-theme-item-cover.ele-setting-side-primary::after {
  background: var(--ele-color-primary) !important;
}

.ele-setting-wrapper
  .ele-setting-theme
  .ele-setting-theme-item-cover.ele-setting-layout-top {
  padding-left: 18px;
}

.ele-setting-wrapper
  .ele-setting-theme
  .ele-setting-theme-item-cover.ele-setting-layout-top::after {
  display: none;
}

/* 主题配置项 */
.ele-setting-wrapper .ele-setting-item {
  display: flex;
  align-items: center;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: var(--ele-border-radius-base);
  transition: background-color 0.2s;
  margin-bottom: 6px;
}

.ele-setting-wrapper .ele-setting-item .ele-setting-item-title {
  flex: 1;
  line-height: 32px;
  overflow: hidden;
}

.ele-setting-wrapper .ele-setting-item .ele-setting-item-control {
  position: relative;
}

.ele-setting-wrapper .ele-setting-item:hover {
  background: var(--ele-fill-color-light);
}

/* 主题色选择 */
.ele-setting-wrapper .ele-setting-colors {
  padding: 0 6px;
  margin-bottom: 18px;
  box-sizing: border-box;
  line-height: 0;
}

.ele-setting-wrapper .ele-setting-color-item {
  width: 20px;
  height: 20px;
  margin: 8px 8px 0 0;
  background-color: currentColor;
  border-radius: var(--ele-border-radius-small);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;
  outline: 1px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.2s;
  cursor: pointer;
}

.ele-setting-wrapper .ele-setting-color-item:hover {
  outline-color: currentColor;
}

.ele-setting-wrapper .ele-setting-color-item .ele-icon {
  color: #fff;
}

/* 颜色选择器 */
.ele-setting-wrapper .ele-setting-color-picker {
  margin-right: 0;
  color: transparent;
  background: conic-gradient(
    from 90deg at 50% 50%,
    rgb(255, 0, 0) -19.41deg,
    rgb(255, 0, 0) 18.76deg,
    rgb(255, 138, 0) 59.32deg,
    rgb(255, 230, 0) 99.87deg,
    rgb(20, 255, 0) 141.65deg,
    rgb(0, 163, 255) 177.72deg,
    rgb(5, 0, 255) 220.23deg,
    rgb(173, 0, 255) 260.13deg,
    rgb(255, 0, 199) 300.69deg,
    rgb(255, 0, 0) 340.59deg,
    rgb(255, 0, 0) 378.76deg
  );
  position: relative;
  overflow: hidden;
}

.ele-setting-wrapper .ele-setting-color-picker > input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  opacity: 0;
}

/* 常用布局 */
.ele-setting-wrapper .ele-setting-layout-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 22px 6px;
  box-sizing: border-box;
}

.ele-setting-wrapper .ele-setting-layout-item {
  padding: 6px;
  box-sizing: border-box;
  word-break: break-all;
  cursor: pointer;
}

.ele-setting-wrapper .ele-setting-layout-item-cover {
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ele-bg-color-page);
  border-radius: var(--ele-border-radius-base);
  border: 1px solid var(--ele-border-color-light);
  box-sizing: border-box;
  transition: all 0.3s;
  overflow: hidden;
}

.ele-setting-wrapper .ele-setting-layout-item-cover > div {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.ele-setting-wrapper .ele-setting-layout-item-cover:hover {
  transform: scale(1.06);
  box-shadow: 0 2px 12px rgba(80, 80, 80, 0.2);
}

.ele-setting-wrapper .ele-setting-layout-item-cover * {
  pointer-events: none;
}

.ele-setting-wrapper .ele-setting-layout-item-label {
  margin-top: 8px;
  font-size: 13px;
  max-height: 36px;
  line-height: 18px;
  text-align: center;
  padding: 0 8px;
  box-sizing: border-box;
  transition: all 0.3s;
  overflow: hidden;
}

.ele-setting-wrapper .ele-setting-layout-item-label::before {
  content: '';
  width: 6px;
  height: 6px;
  margin: 0 4px 0 -8px;
  display: inline-block;
  background: transparent;
  transition: all 0.3s;
  vertical-align: 2px;
  border-radius: 50%;
}

.ele-setting-wrapper .ele-setting-layout-item-cover-img {
  width: 100%;
  height: 100%;
}

.ele-setting-wrapper
  .ele-setting-layout-item.is-active
  .ele-setting-layout-item-label {
  color: var(--ele-color-primary);
}

.ele-setting-wrapper
  .ele-setting-layout-item.is-active
  .ele-setting-layout-item-label::before {
  background: var(--ele-color-primary);
}

.ele-setting-wrapper .ele-setting-layout-list + .ele-setting-item {
  margin-top: 14px;
}

/* 背景上传 */
.ele-setting-wrapper .ele-setting-bg-upload {
  width: 28px;
  height: 28px;
  font-size: 15px;
  color: var(--ele-text-color-placeholder);
  border: 1px dashed var(--ele-border-color);
  border-radius: var(--ele-border-radius-base);
  transition:
    color 0.2s,
    border-color 0.2s;
  position: relative;
  overflow: hidden;
}

.ele-setting-wrapper .ele-setting-bg-upload:hover {
  color: var(--ele-color-primary);
  border-color: var(--ele-color-primary);
}

.ele-setting-wrapper .ele-setting-bg-upload > svg {
  stroke-width: 3;
}

.ele-setting-wrapper .ele-setting-bg-upload > input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  opacity: 0;
}

/* 背景颜色选择 */
.ele-setting-wrapper .ele-setting-bg-picker {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ele-setting-wrapper .ele-setting-bg-picker .layui-colorpicker {
  flex-shrink: 0;
}

.ele-setting-wrapper .ele-setting-bg-picker .layui-colorpicker-trigger-bgcolor,
.ele-setting-wrapper .ele-setting-bg-picker .layui-colorpicker-trigger-span {
  border-radius: var(--ele-border-radius-base);
}

.ele-setting-wrapper .ele-setting-bg-picker .layui-colorpicker-trigger-i {
  opacity: 0;
}

/* 布局缩略图 */
.ele-setting-wrapper .ele-setting-layout-cover-bg-dark {
  background: #262626;
}

.ele-setting-wrapper .ele-setting-layout-cover-bg-light {
  background: var(--ele-bg-color);
}

.ele-setting-wrapper .ele-setting-layout-cover-bg-primary {
  background: var(--ele-color-primary);
}

.ele-setting-wrapper .ele-setting-layout-cover-bg-blue {
  background: #187b67;
}

.ele-setting-wrapper .ele-setting-layout-cover-bg-blue-dark {
  background: #199b81;
}

.ele-setting-wrapper .ele-setting-layout-cover-border-lighter {
  border-color: var(--ele-border-color-lighter);
}

.ele-setting-wrapper .ele-setting-layout-cover-bg-fill {
  background: var(--ele-border-color-light);
}

.ele-setting-wrapper .ele-setting-layout-cover-bg-fill-light {
  background: var(--ele-border-color-extra-light);
}

.ele-setting-wrapper .ele-setting-layout-cover-bg-fill-dark {
  background: var(--ele-border-color);
}

/* 分割线 */
.ele-setting-wrapper .ele-setting-divider {
  border-top: 1px solid var(--ele-border-color-light);
  width: calc(100% - 12px);
  margin: 14px auto 10px auto;
}

/* 滚动条 */
@media (hover: hover) and (pointer: fine) {
  .ele-setting-wrapper::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .ele-setting-wrapper::-webkit-scrollbar-thumb {
    border-radius: 6px;
    border: 2px solid transparent;
    background-color: hsla(0, 0%, 38%, 0.4);
    background-clip: padding-box;
  }

  .ele-setting-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: hsla(0, 0%, 38%, 0.6);
  }

  .ele-setting-wrapper::-webkit-scrollbar-track,
  .ele-setting-wrapper::-webkit-scrollbar-corner {
    background: transparent;
  }
}

@supports (-moz-appearance: none) {
  .ele-setting-wrapper {
    scrollbar-width: thin;
    scrollbar-color: hsla(0, 0%, 38%, 0.4) transparent;
  }
}

/* 选项卡 */
.ele-setting-segmented {
  flex-shrink: 0;
  padding: 3px 4px;
  margin: 10px 14px 6px 14px;
  background: var(--ele-fill-color-light);
  border-radius: var(--ele-border-radius-base);
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
}

.ele-setting-segmented .ele-setting-segmented-item {
  flex: 1;
  height: 28px;
  line-height: 28px;
  color: var(--ele-text-color-secondary);
  text-align: center;
  border-radius: var(--ele-border-radius-base);
  transition:
    color 0.2s,
    background-color 0.2s;
  box-sizing: border-box;
  user-select: none;
  cursor: pointer;
}

.ele-setting-segmented .ele-setting-segmented-item:hover {
  color: var(--ele-text-color-primary);
  background: var(--ele-fill-color);
}

.ele-setting-segmented .ele-setting-segmented-item.is-active {
  color: var(--ele-text-color-primary);
  background: var(--ele-bg-color-overlay);
  box-shadow: var(--ele-box-shadow-lighter);
}

/* 底栏 */
.ele-setting-footer {
  padding: 6px 6px 0 6px;
  display: flex;
  align-items: center;
}

.ele-setting-footer > .ele-icon {
  flex: 1;
  height: 26px;
  font-size: 13px;
  border: 1px solid var(--ele-border-color);
  border-radius: var(--ele-border-radius-base);
  transition: all 0.2s;
  user-select: none;
  cursor: pointer;
}

.ele-setting-footer > .ele-icon > svg {
  font-size: 12px;
  margin-right: 6px;
}

.ele-setting-footer > .ele-icon:hover {
  color: var(--ele-color-primary);
  border-color: var(--ele-color-primary);
  background: var(--ele-color-primary-light-9);
}

.ele-setting-footer > .ele-icon:first-child {
  color: #fff;
  background: var(--ele-color-primary);
  border-color: var(--ele-color-primary);
  margin-right: 12px;
}

.ele-setting-footer > .ele-icon:first-child:hover {
  color: var(--ele-color-primary);
  background: var(--ele-color-primary-light-9);
}

/* 抽屉 */
.ele-setting-drawer {
  width: 268px;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  color: var(--ele-text-color-regular);
  background: var(--ele-bg-color-overlay);
  box-shadow: var(--ele-box-shadow-dark);
  z-index: 199999;
}

.ele-setting-drawer .ele-setting-drawer-header {
  flex-shrink: 0;
  height: 52px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid var(--ele-border-color-light);
}

.ele-setting-drawer .ele-setting-drawer-title {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  overflow: hidden;
}

.ele-setting-drawer .ele-setting-drawer-close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  font-size: 16px;
  color: var(--ele-text-color-secondary);
  cursor: pointer;
}

.ele-setting-drawer .ele-setting-drawer-close:hover {
  background: var(--ele-fill-color-light);
  border-radius: var(--ele-border-radius-small);
}

.ele-setting-drawer .ele-setting-drawer-close-btn {
  position: absolute;
  top: calc(50vh - 18px);
  left: -36px;
  width: 36px;
  height: 36px;
  border-radius: 8px 0 0 8px;
  color: #fff;
  font-size: 18px;
  background-color: var(--ele-color-primary);
  transition: all 0.2s;
  cursor: pointer;
}

.ele-setting-drawer .ele-setting-drawer-close-btn:hover {
  /* background-color: var(--ele-color-primary-light-3); */
  filter: brightness(0.8);
}

.ele-setting-slide-enter-active,
.ele-setting-slide-leave-active {
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.ele-setting-slide-enter-from,
.ele-setting-slide-leave-active {
  transform: translateX(116%);
}