.vk-check-logic{
  cursor: pointer;
}

.vk-collapse-transition-horizontal-enter-active {
  transition: 0.4s max-width ease-in-out,
  0.4s padding-left ease-in-out,
  0.4s padding-right ease-in-out;
}
.vk-collapse-transition-horizontal-leave-active {
  transition: 0.4s max-width ease-in-out,
  0.4s padding-left ease-in-out,
  0.4s padding-right ease-in-out;
}

[class^="vk-corner-"] {
  position: absolute;
}
.vk-corner__inner{
  height: 100%;
  overflow: hidden;
}
.vk-corner__inner:hover {
  overflow: auto;
}
.vk-corner{
  position: relative;
  height: 100%;
  width: 100%;
}
.vk-corner-lt{
  top: 0;
  left: 0;
}
.vk-corner-rt{
  top: 0;
  right: 0;
}
.vk-corner-lb{
  bottom: 0;
  left: 0;
}
.vk-corner-rb{
  bottom: 0;
  right: 0;
}

.vk-duplex{
  display: flex;
  flex-direction: var(--vk-duplex-direction);
  gap: var(--vk-duplex-gap);
}
.vk-duplex.is-full-h{
  height: 100%;
}
.vk-duplex-1.with-flex,
.vk-duplex-2.with-flex {
  flex: var(--vk-duplex-flex);
}
.vk-duplex-1.with-overflow,
.vk-duplex-2.with-overflow {
  overflow: var(--vk-duplex-overflow);
}

.vk-duplex-calc:where(.is-full){
  height: 100%;
}
.vk-duplex-calc .with-overflow{
  overflow: var(--vk-duplex-calc-overflow);
}
.vk-duplex-calc-two{
  margin-top: var(--vk-duplex-calc-gap);
}

.intersection-observer-item{
  position: relative;
}
.intersection-observer-item-anchor{
  position: absolute;
  top: var(--vk-intersection-observer-anchor-offset);
}
.intersection-observer-item-target{
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: auto;
}

.panel-main-content{
  height: 100%;
}

/* tab dragging */
.panel-main-tab.is-tab-dragging {
  box-shadow: 0 0 10px 0 var(--el-color-primary);
}

.vk-panel-carcass{
  border: var(--el-border);
  min-width: var(--vk-panel-carcass-minwidth);
  min-height: var(--vk-panel-carcass-minheight);
  display: flex;
  flex-direction: column;
}
.vk-panel-carcass__main{
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vk-panel-carcass__content{
  flex: 1;
  overflow: hidden;
}
.vk-panel-carcass.is-draggable{
  position: absolute;
}
.vk-panel-carcass__top{
  padding-top: var(--gap-xxs);
  padding-bottom: var(--gap-xxs);
  padding-right: var(--gap-xxs);
}
.vk-panel-carcass-resize-area__rb{
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  cursor: se-resize;
}
.vk-panel-carcass-resize-area__rb::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: transparent var(--el-border-color-darker);
  transform: rotate(90deg);
}
.vk-panel-carcass-resize-area__tl{
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  cursor: nw-resize;
}
.vk-panel-carcass-resize-area__tl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-style: solid;
  border-width: 0 0 10px 10px;
  border-color: transparent var(--el-border-color-darker);
}

/* 禁用文本选中 */
.vk-panel-carcass-resize-area__rb,
.vk-panel-carcass-resize-area__tl,
.vk-panel-carcass__tabs,
.vk-panel-carcass__top {
  user-select: none;
}
/* endof 禁用文本选中 */

/* tabs */
.vk-panel-carcass__tabs{
  display: flex;
  justify-content: flex-start;
}

/* tabs style */
.vk-panel-carcass__main.el-tabs--border-card {
  border:none;
}
.vk-panel-carcass__top{
  background-color: var(--el-fill-color-light);
  border-bottom: 1px solid var(--el-border-color);
}
.vk-panel-carcass__main.el-tabs--border-card>.el-tabs__header {
  border-bottom: none;
}
/* endof tabs style */
.vk-panel-group.is-only .panel-main-tab {
  cursor: initial;
}
.vk-panel-group.is-empty {
  display: none;
}

/* 拖拽时样式 */
.vk-panel-group.is-last-dragged{
  z-index: 99;
}
.vk-panel-group {
  transition: opacity 0.3s;
}
.vk-panel-group.is-draggingover {
  opacity: 0.5;
}
.vk-panel-group.is-dragover .vk-panel-carcass__main {
  box-shadow: 0 0 0 2px var(--el-color-primary);
}
/* endof 拖拽时样式  */

.vk-resizable{
  min-width: var(--vk-resizable-minwidth);
  min-height: var(--vk-resizable-minheight);
  position: relative;
}
.vk-resizable__br{
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  cursor: se-resize;
}
.vk-resizable__br::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: transparent var(--el-border-color-darker);
  transform: rotate(90deg);
}
.vk-resizable__tl{
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  cursor: nw-resize;
}
.vk-resizable__tl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-style: solid;
  border-width: 0 0 10px 10px;
  border-color: transparent var(--el-border-color-darker);
}

.vk-scale-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.vk-scale-container__inner {
  flex-shrink: 0;
  position: relative;
}

.vk-split-grid {
  display: grid;
  width: 100%;
  height: 100%;
}
.vk-split-grid-gutter {
  transition: background 400ms;
  transition-delay: 0.2s;
}
.vk-split-grid-gutter:hover{
  cursor: col-resize;
  background: var(--el-color-primary, #409eff);
}
.vk-split-grid-gutter.is-dragging {
  background-color: var(--el-color-primary, #409eff);
}

.vk-svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.vk-svg-external-icon {
  background-color: currentColor;
  mask-size: cover!important;
  display: inline-block;
}

.vk-swipe {
  position: relative;
  width: 100%;
  height: 100%;
  --vk-swipe-split-left: 50%;
  --vk-swipe-split-top: 50%;
  --vk-swipe-split-bg: #323232bf;
  --vk-swipe-split-slider-offset: 45%;
}
.vk-swipe.is-disabled .vk-swipe-item.is-above {
  clip-path: initial;
}
.vk-swipe-item.is-above {
  z-index: 1;
}
.vk-swipe-item.is-above.is-horizontal {
  clip-path: polygon(
    0 0, 
    var(--vk-swipe-split-left) 0,
    var(--vk-swipe-split-left) 100%, 
    0 100%
  );
}
.vk-swipe-item.is-above.is-vertical {
  clip-path: polygon(
    0 0, 
    100% 0,
    100% var(--vk-swipe-split-top), 
    0 var(--vk-swipe-split-top)
  );
}
.vk-swipe-line {
  background-color: var(--vk-swipe-split-bg);
  position: absolute;
  user-select: none;
  z-index: 1;
}
.vk-swipe-line.is-horizontal {
  bottom: 0;
  top: 0;
  left: var(--vk-swipe-split-left);
  width: 10px;
}
.vk-swipe-line.is-vertical {
  left: 0;
  right: 0;
  height: 10px;
  width: auto;
  top: var(--vk-swipe-split-top);
}
.vk-swipe-float-block {
  cursor: grab;
  background-color: var(--vk-swipe-split-bg);
  border-radius: 50%;
  bottom: 0;
  height: 30px;

  position: absolute;
  user-select: none;
  width: 30px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.vk-swipe-float-block.is-horizontal {
  left: var(--vk-swipe-split-left);
  top: var(--vk-swipe-split-slider-offset);
  margin-left: -10px;
  transform: rotate(90deg);
}
.vk-swipe-float-block.is-vertical {
  left: var(--vk-swipe-split-slider-offset);
  top: var(--vk-swipe-split-top);
  margin-top: -10px;
}
.vk-swipe-item{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}