.kt-canvas-table-box {
  line-height: 0;
  animation  : toOpacity 0.1s;

  &:fullscreen {
    background-color: #fff;
  }
}

:not(:root):fullscreen::backdrop {
  background-color: #fff;
}

@keyframes toOpacity {
  from {
    opacity: 0.98;
  }

  to {
    opacity: 1;
  }
}

.kt-canvas-table {
  position: relative;
  display : inline-block;

  * {
    box-sizing: border-box;
  }

  canvas {
    font-family: "kt-iconfont";
  }

  &-scrolly-back {
    position     : absolute;
    z-index      : 1000000;
    bottom       : 20px;
    right        : 10px;
    color        : #fff;
    width        : 30px;
    height       : 30px;
    border-radius: 100%;
    cursor       : pointer;
    line-height  : 30px;
    text-align   : center;
    opacity      : 0.8;
    transition   : all 0.4s;

    &:hover {
      opacity   : 1;
      box-shadow: 0 0 10px #999;
    }
  }

  &-operate-board {
    line-height : 1.4;
    position    : absolute;
    top         : 0;
    right       : 0;
    bottom      : 0;
    left        : 0;
    // display: flex;
    // flex-wrap: wrap;
  }

  &-scrolly-box {
    z-index : 10;
    position: absolute;
    right   : 0;
    top     : var(--header-height);
    height  : 100%;
    width   : var(--bar-width);
  }

  &-scrolly-bar {
    background   : rgba(0, 0, 0, 0.1);
    left         : 50%;
    transform    : translateX(-50%);
    width        : calc(100% - 4px);
    position     : absolute;
    border-radius: 100px;
    transition   : background, width 0.15s;
    cursor       : pointer;
  }

  .moving.kt-canvas-table-scrolly-bar,
  &-scrolly-bar:hover {
    background: rgba(0, 0, 0, 0.35);
    width     : calc(100% - 2px);
  }

  &-scrollx-box {
    position     : absolute;
    background   : var(--background);
    height       : var(--bar-width);
    border-top   : 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    width        : 100%;
    bottom       : 0;
    z-index      : 10;
  }

  &_border &-scrollx-box {
    border: 1px solid var(--border-color);
  }

  &-scrollx-bar {
    height       : calc(100% - 2px);
    background   : rgba(0, 0, 0, 0.1);
    position     : absolute;
    top          : 50%;
    transform    : translateY(-50%);
    border-radius: 100px;
    transition   : background, height 0.15s;
    cursor       : pointer;
  }

  .moving.kt-canvas-table-scrollx-bar,
  &-scrollx-bar:hover {
    background: rgba(0, 0, 0, 0.35);
    height    : 100%;
  }

  &-slot-wrap {
    float   : left;
    position: relative;
  }

  &-slot {
    position   : absolute;
    overflow   : hidden;
    display    : flex;
    align-items: center;

    // content-visibility: auto;
    .cell {
      overflow     : hidden;
      white-space  : nowrap;
      text-overflow: ellipsis;

      &>div {
        overflow     : hidden;
        white-space  : nowrap;
        text-overflow: ellipsis;
      }
    }
  }

  &-current-length {
    margin   : 20px 0;
    padding  : 2px 5px;
    font-size: 13px;
    color    : #606266;

    display        : flex;
    align-items    : flex-start;
    justify-content: flex-end;

    .query {
      // flex: 1;
      max-width: 80%;
    }

    .total,
    .query-label {
      height     : 28px;
      line-height: 28px;
    }

    .el-tag {
      // margin-right   : 10px;
      margin: 3px 10px 3px 0;
    }
  }

  &-col-resize-handler {
    position  : absolute;
    cursor    : col-resize;
    background: var(--primary);
  }

  &-col-resize-line {
    position  : absolute;
    height    : 100%;
    background: #ccc;
    z-index   : 9;
    top       : 0;
    width     : 1px;
  }

  &-tooltip {
    &.popover {
      pointer-events: initial;
    }

    z-index       : 9999;
    position      : fixed;
    color         : #666;
    pointer-events: none;
    display       : inline-block;
    background    : #ffffff;
    padding       : 5px 10px;
    font-size     : 12px;
    border-radius : 4px;
    box-shadow    : 0 3px 6px -4px #0000001f,
    0 6px 16px #00000014,
    0 9px 28px 8px #0000000d;
  }

  &-tooltip-arrow,
  &-tooltip-arrow::before {
    position  : absolute;
    width     : 8px;
    height    : 8px;
    background: inherit;
  }

  &-tooltip-arrow {
    visibility: hidden;
  }

  &-tooltip-arrow::before {
    visibility: visible;
    content   : "";
    transform : rotate(45deg);
  }

  &-tooltip[data-popper-placement^="top"]>.kt-canvas-table-tooltip-arrow {
    bottom: -4px;
  }

  &-tooltip[data-popper-placement^="bottom"]>.kt-canvas-table-tooltip-arrow {
    top: -4px;
  }

  &-tooltip[data-popper-placement^="left"]>.kt-canvas-table-tooltip-arrow {
    right: -4px;
  }

  &-tooltip[data-popper-placement^="right"]>.kt-canvas-table-tooltip-arrow {
    left: -4px;
  }

  &-select-row.el-radio,
  &-select-row.el-checkbox {
    display: block;
    width  : 100%;
    padding: 5px 0px;
  }

  &-select-footer {
    display    : flex;
    padding-top: 5px;

    .el-button {
      padding-top   : 0;
      padding-bottom: 0;
      height        : 28px;
    }

    .el-button--primary {
      padding: 0 8px;
    }
  }

  &-select-input {
    position  : absolute;
    background: transparent;
    border    : none;
    padding   : 0 8px;
    outline   : none;
    font-size : 14px;
    background: #fff;
  }

  &.is-phone {

    .kt-canvas-table-scrolly-box,
    .kt-canvas-table-scrollx-box {
      pointer-events: none;
    }
  }

  &-select {
    .el-button--primary {
      background  : #65c6cf;
      border-color: #65c6cf;
      transition  : all 0.4s;
    }

    .el-button--primary:hover {
      background  : #65c6cf;
      border-color: #65c6cf;
      box-shadow  : 0 0 5px #65c6cf;
    }

    .el-button--text {
      color     : #65c6cf;
      transition: all 0.4s;
    }

    .el-button--text:hover {
      color      : #65c6cf;
      text-shadow: 0 0 2px #65c6cf;
    }

    .el-input__inner:focus {
      border-color: #65c6cf;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #65c6cf;
      border-color    : #65c6cf;
    }

    .el-checkbox__input.is-checked+.el-checkbox__label {
      color: #65c6cf;
    }

    .el-radio__input.is-checked .el-radio__inner {
      background-color: #65c6cf;
      border-color    : #65c6cf;
    }

    .el-radio__input.is-checked+.el-radio__label {
      color: #65c6cf;
    }
  }

  .right-menu {
    position     : fixed;
    background   : #fff;
    border       : solid 1px rgba(0, 0, 0, .2);
    border-radius: 3px;
    z-index      : 999;
    display      : none;
    border       : 1px solid #eee;
    box-shadow   : 0 0.5em 1em 0 rgba(0, 0, 0, .1);
    border-radius: 1px;

    a {
      min-width      : 100px;
      height         : 3em;
      line-height    : 3em;
      font-size      : 13px;
      text-align     : center;
      display        : block;
      color          : #1a1a1a;
      text-decoration: none;
      padding        : 0 10px;

      &:hover {
        background: #65c6cf;
        color     : #fff;
      }

      i {
        margin-right: 10px;
      }
    }
  }
}

.setting-dialog {
  .el-dialog__body {
    padding: 10px 20px;

    .tip {
      margin-bottom: 20px;
      color        : #65c6cf;

      i {
        margin-right: 5px;
      }
    }

    .columns-list {
      height: 300px;

      // overflow-y: scroll;
      .el-scrollbar__wrap {
        overflow-x: hidden;
      }

      .dragItem {
        transition: transform .3s;
      }

      .item {
        font-size          : 14px;
        line-height        : 1em;
        border             : 1px solid #eee;
        // padding         : 0 15px;
        margin-bottom      : 2px;
        background-color   : #fafafa;
        display            : flex;
        align-items        : center;


        &.draggable {
          cursor: move;
        }

        .checkbox {
          padding  : 15px;
          cursor   : pointer;
          color    : #65c6cf;
          font-size: 16px;
        }
      }
    }
  }
}