@import './var.css';
@import 'element-plus/theme-chalk/dark/css-vars.css';

// 解决抽屉弹出时，body宽度变化的问题
.el-popup-parent--hidden {
  width: 100% !important;
}

*,
:after,
:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@content-wrap: ~'@{namespace}-content-wrap';

.@{elNamespace}-button {
  background: var(--el-button-bg-color);
}

.@{elNamespace}-button--primary {
  --el-button-bg-color: var(--main-bg-color, var(--el-color-primary)) !important;
  --el-button-border-color: var(--btn-border-color, var(--el-color-primary)) !important;
}
#app{
  .@{elNamespace}-transfer{
    --el-transfer-panel-width:333px;
  }
}

.@{content-wrap} {
  .@{elNamespace}-card__body {
    padding: 16px 16px 10px;
  }

  .@{elNamespace}-divider--horizontal {
    margin: 14px 0;
  }

  // Table buttons
  .@{namespace}-table-buttons {
    // primary
    .@{elNamespace}-button--primary {
      background: transparent !important;
      color: var(--el-color-primary);

      &:hover {
        color: var(--el-color-primary);
        border-color: var(--el-button-border-color);
      }

      &.is-disabled {
        color: var(--el-color-primary-light-5);
        background: transparent !important;
        border-color: var(--el-color-primary-light-5);
      }
    }

    // buttons hover
    .@{elNamespace}-button {
      position: relative;
      min-width: 66px;

      &::before {
        content: '';
        display: inline-block;
        position: absolute;
        bottom: 0;
        right: 0;
        border-left: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 7px solid transparent;
        border-radius: var(--el-border-radius-base);
        transition: border 0.3s;
      }

      &:hover::before {
        border-bottom-color: #f1cf33;
        border-right-color: #f1cf33;
      }
    }

    .@{elNamespace}-button--danger {
      background: transparent !important;
      color: var(--el-color-danger);

      &:hover {
        background: transparent !important;
        color: var(--el-color-danger);
      }
    }
  }
}

.el-table__cell .el-link + .el-link::before {
  color: var(--el-color-warning);
  content: '|';
  margin-right: 8px;
}

::-webkit-scrollbar,
textarea::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: rgba(35, 46, 64, 0.1);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40, endColorstr=#0d232e40);
}

::-webkit-scrollbar-track:hover,
textarea::-webkit-scrollbar-track:hover {
    background-color: rgba(35, 46, 64, 0.15);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40, endColorstr=#0d232e40);
}

::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    background-clip: padding-box;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: rgba(35, 46, 64, 0.1);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a232e40, endColorstr=#1a232e40);
}

::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover {
    background-color: rgba(35, 46, 64, 0.3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d232e40, endColorstr=#4d232e40);
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}
