.flyta-layout-setting-drawer {

  .setting-wrapper {

    .schematic-base {
      width: 52px;
      height: 36px;
      display: inline-block;
      position: relative;
      cursor: pointer;
      padding: 14px 0 0 24px;
      border-radius: 3px;
      overflow: hidden;
      transition: background-color 0.2s;
      box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
      background-color: var(--layout-body-background);

      &:before, &:after {
        content: "";
        background-color: #fff;
        position: absolute;
        transition: background-color 0.2s;
      }
      &:before {
        width: 100%;
        height: 10px;
        left: 0;
        top: 0;
      }
      &:after {
        width: 14px;
        height: 100%;
        left: 0;
        top: 0;
      }
      &:not(:last-child) {
        margin-right: 20px;
      }
    }

    .layout-style, .head-bar-style {
      padding: 0 15px;
      margin-bottom: 15px;
    }

    .layout-style {
      display: grid;
      justify-content: space-between;
      justify-items: center;
      grid-row-gap: 15px;
      grid-template-columns: repeat(3, 87px);

      .theme-card-border {
        padding: 4px 3px 2px;
        border: 1px solid transparent;
        &:hover {
          border: 1px solid #67C23A;
        }
      }

      .is-active {
        border: 1px solid #67C23A;
      }
    }

    .theme-side-dark:after, .theme-top-dark:before {
      background-color: #001529;
      z-index: 1;
    }

    .head-bar-style .theme-primary:before {
      background-color: var(--header-background);
    }

    .setting-title {
      padding: 0 15px;
      font-size: 13px;
      margin-bottom: 15px;
      color: var(--color-text-secondary);
    }

    .more-menu-item {
      cursor: pointer;
      padding: 15px;
      margin-bottom: 20px;
      border-bottom: 1px solid var(--border-color-lighter);
      .svg-icon {
        font-size: 18px;
        margin-right: 5px;
      }
      &:hover {
        background-color: var(--header-tool-hover-bg);
      }
    }

    .setting-item {
      padding: 0 15px;
      margin-bottom: 20px;
    }

    .more-menu-item, .setting-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      &-title {
        flex: 1;
        display: flex;
        align-items: center;
      }
      &-control {
        line-height: 1;
      }
    }

    .el-divider {
      margin-bottom: 20px;
    }

    .theme-colors {
      color: #fff;

      /* 颜色选择器 */
      ::v-deep.setting-color-picker.el-color-picker {
        height: auto;
        margin-top: 8px;

        .el-color-picker__trigger {
          padding: 0;
          width: 20px;
          height: 20px;
          border: none;
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
        }

        .el-color-picker__color {
          border: none;
        }

        .el-color-picker__color-inner {
          border-radius: 2px;
        }

        .el-color-picker__empty {
          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
          );
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          transform: none;
          border-radius: 2px;
          font-size: 0;
        }

        .el-color-picker__icon {
          font-size: 14px;
        }
      }

      &-item {
        width: 20px;
        height: 20px;
        display: inline-block;
        line-height: 22px;
        border-radius: 2px;
        margin: 5px 8px 0 0;
        vertical-align: top;
        position: relative;
        text-align: center;
        cursor: pointer;
        box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
      }
    }

    .setting-operate {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      justify-content: space-around;
    }
  }

  .setting-dark {
    .schematic-base{
      box-shadow: 0 1px 4px rgb(0 0 0 / 55%);
      &:before, &:after {
        background-color: #1f1f1f;
      }
    }
    .theme-side-dark:after, .theme-top-dark:before {
      background-color: #262626;
      z-index: 1;
    }
  }
}
