@import "./colors.less";

.damolish {
  /* 引用字体图标库的svg图标 */
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  /* button start */

  .el-button {
    padding: 8px 12px;
    font-size: 14px;

    &.is-disabled,
    &.is-disabled:focus,
    &.is-disabled:hover {
      color: @gray-placeholder;
    }
    &:not(.el-button--text) {
      &.is-disabled,
      &.is-disabled:focus,
      &.is-disabled:hover {
        background-color: @gray-disable;
        border-color: @gray-border;
        color: @gray-placeholder;
      }
    }


    &.is-loading:before {
      background-color: rgba(255, 255, 255, 0.25);
    }

    &.el-button--mini,
    &.el-button--small {
      font-size: 12px;
    }

    &.el-button--mini,
    &.el-button--mini.is-round {
      padding: 7px 15px;
    }

    &.button-new-tag {
      border-style: dashed;
    }
  }

  :not(.el-transfer__buttons) .el-button & + .el-button {
    margin-left: 10px;
  }

  .el-button--default {
    color: @gray02;
    background-color: #fff;
    border-color: @gray-border;

    &:hover {
      color: @blue;
      border-color: @blue;
    }

    &:active {
      color: @blue-click;
      border-color: @blue-click;
    }
  }

  .el-button--primary {
    color: #fff;
    background-color: @blue;
    border-color: @blue;

    &:hover {
      color: #fff;
      background-color: @blue-hover;
      border-color: @blue-hover;
    }

    &:active {
      background-color: @blue-click;
      border-color: @blue-click;
    }
  }

  .el-button--danger {
    color: @red-error;
    background-color: @gray-disable;
    border-color: @gray-border;

    &:hover {
      color: #fff;
      background-color: @red-error;
      border-color: @red-error;
    }

    &:active {
      color: #fff;
      background-color: #cf1322;
      border-color: #cf1322;
    }
  }

  .el-button--text {
    padding: 0;
    color: @blue;

    &:hover {
      color: @blue-hover;
    }

    &:active {
      color: @blue-click;
    }
  }

  /* 幽灵按钮 */

  .specter {
    &.el-button--default {
      color: #fff;
      background-color: transparent;
      border-color: #fff;

      &:hover {
        color: #fff;
        border-color: @blue;
        background-color: @blue;
      }

      &:active {
        color: #fff;
        border-color: @blue-click;
        background-color: @blue-click;
      }
    }

    &.el-button--primary {
      color: @blue;
      background-color: transparent;
      border-color: @blue;

      &:hover {
        color: #fff;
        border-color: @blue;
        background-color: @blue;
      }

      &:active {
        color: #fff;
        border-color: @blue-click;
        background-color: @blue-click;
      }
    }

    &.el-button--danger {
      color: @red-error;
      background-color: transparent;
      border-color: @red-error;

      &:hover {
        color: #fff;
        background-color: @red-error;
        border-color: @red-error;
      }

      &:active {
        color: #fff;
        background-color: #cf1322;
        border-color: #cf1322;
      }
    }

    &.is-disabled,
    &.is-disabled:focus,
    &.is-disabled:hover {
      background-color: transparent;
      border-color: @gray-border;
      color: @gray-placeholder;
    }
  }

  .el-button-group > .el-button + .el-button {
    margin-left: 0;
  }

  /* button end */

  /* breadcrumb start*/

  .el-breadcrumb__inner {
    a,
    &.is-link {
      font-weight: 400;
      color: @gray02;
    }
  }

  .el-breadcrumb__item:last-child {
    .el-breadcrumb__inner,
    .el-breadcrumb__inner a,
    .el-breadcrumb__inner a:hover,
    .el-breadcrumb__inner:hover {
      font-weight: 500;
      color: @gray01;
    }
  }

  .el-breadcrumb__separator[class*="icon"] {
    font-size: 12px;
    color: #a0a2ad;
  }

  /* breadcrumb end*/
  /* dropdown start*/

  .el-dropdown-menu__item,
  .el-dropdown-menu__item:not(.is-disabled),
  .el-dropdown-selfdefine {
    .el-icon-arrow-down {
      transition: all 0.5s;
    }
  }

  .el-dropdown-menu__item:focus,
  .el-dropdown-menu__item:not(.is-disabled):hover,
  .el-dropdown-selfdefine:hover {
    color: @blue;

    .el-icon-arrow-down {
      transform: rotateZ(-180deg);
    }
  }

  /* dropdown end*/
  /* pagination start*/

  .el-pagination {
    margin: 20px 0;
    padding: 2px 0;

    &.is-background .el-pager li:not(.disabled).active {
      background-color: @blue;
    }

    &.is-background .el-pager li:not(.disabled):not(.active):hover {
      color: @blue;
    }

    .el-select .el-input {
      .el-input__inner {
        height: 28px;
        line-height: 27px;
      }

      .el-select__caret.is-reverse {
        margin-top: -2px;
      }
    }
    .btn-next {
      margin-right: 0;
    }
    button:hover {
      color: @blue;
    }
  }

  .el-pagination__editor.el-input .el-input__inner:hover,
  .el-pagination__sizes .el-input .el-input__inner:hover {
    border-color: @blue;
  }

  .el-pager li {
    &:hover, &.active {
      color: @blue;
    }
  }

  /* pagination end */
  /* checkbox start*/

  .el-checkbox {
    color: @gray01;
    &.is-bordered {
      border-color: @gray-border;

      &.el-checkbox--medium {
        height: 32px;
      }

      &.is-checked {
        border-color: @gray-border;
      }
    }

    &.is-disabled {
      color: @gray-placeholder;

      .is-disabled .el-checkbox__inner {
        border-color: @gray-placeholder;
        background-color: @gray-disable;
      }
    }
  }

  .el-checkbox__inner:hover {
    border-color: @blue;
  }

  .el-checkbox__input {
    &.is-checked,
    &.is-indeterminate {
      .el-checkbox__inner {
        background-color: @blue;
        border-color: @blue;
      }
    }
    &.is-focus {
      .el-checkbox__inner {
        border-color: @blue;
      }
    }

    &.is-checked + .el-checkbox__label {
      color: @gray02;
    }
  }

  /* checkbox end*/
  /* radio start */
  .el-radio {
    color: @gray01;
  }

  .el-radio__input.is-checked {
    & + .el-radio__label {
      color: @gray01;
    }

    .el-radio__inner {
      border-color: @blue;
      background-color: @blue;
    }
  }
  .el-radio__inner:hover {
    border-color: @blue;
  }
  .el-radio-group:not(.specter) .el-radio-button {
    .el-radio-button__inner {
      border: 1px solid #dcdfe6;
    }

    &.is-active .el-radio-button__inner {
      border-color: @blue;
    }

    &:not(.is-active) .el-radio-button__inner:hover {
      color: @blue;
      border-color: @blue;
    }
  }

  .el-radio-button:not(.is-active) .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    border-color: @blue;
    background-color: @blue;
    &:hover {
      color: #fff;
    }
  }
  .el-radio-group.specter {
    .is-active {
      .el-radio-button__inner {
        color: @blue;
        background-color: transparent;
      }
    }
  }

  /* radio end */
  /* input start */
  .el-input__inner {
    padding: 0 12px;
    height: 32px;
    font-size: 14px;
    line-height: 32px;
    color: @gray01;
    border-color: @gray-border;

    &:hover {
      border-color: @gray-placeholder;
    }
  }
  .el-input--prefix .el-input__inner {
    padding-left: 30px;
  }
  .el-input--suffix .el-input__inner {
    padding-right: 30px;
  }
  .el-input.is-disabled .el-input__inner {
    border-color: @gray-border;
  }

  .el-textarea__inner {
    color: @gray01;
    resize: none;
    border-color: @gray-border;

    &:focus {
      border-color: @blue;
    }
  }

  .el-input__count {
    font-size: 12px;
    color: #c0c4cc;
    line-height: normal;
  }

  .el-cascader .el-input .el-input__inner:focus,
  .el-cascader .el-input.is-focus .el-input__inner,
  .el-input.is-active .el-input__inner,
  .el-input__inner:focus {
    border-color: @blue;
  }

  /* 可清空的输入框 清空按钮 */
  .el-input__suffix .el-icon-error {
    cursor: pointer;
  }

  /* input end */
  /* input-number start */

  .el-input-number {
    // width: 90px;
    line-height: 32px;
    .el-input-number__decrease,
    .el-input-number__increase {
      line-height: 30px;
      &:hover {
        color: @blue;
      }
      &:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled) {
        border-color: @blue;
      }
    }

    &.is-controls-right {
      &:hover {
        .el-input-number__decrease,
        .el-input-number__increase {
          opacity: 1;
        }
      }

      .el-input__inner {
        text-align: left;
        padding-left: 12px;
        padding-right: 20px;
      }
      .el-input-number__decrease,
      .el-input-number__increase {
        width: 20px;
        line-height: 15px;
        opacity: 0;
        transition: opacity 0.5s;
        &:hover {
          color: @blue;
          &:not(.is-disabled)
            ~ .el-input
            .el-input__inner:not(.is-disabled):not(:focus) {
            border-color: @gray-border;
          }
        }
      }
    }
  }

  /* input-number end */
  /* switch start */
  .el-switch.is-checked .el-switch__core {
    border-color: @blue;
    background-color: @blue;
  }

  .el-switch__label.is-active {
    color: @blue;
  }

  /* switch end */

  /* select start */

  .el-select {
    .el-input {
      border: none;
      &.is-focus .el-input__inner {
        border-color: @blue;
      }
      .el-input__inner {
        border: 1px solid @gray-border;
      }
    }
    .el-tag__close.el-icon-close {
      background-color: transparent;
    }
  }


  .el-select-dropdown__item.selected {
    color: @blue;
  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
    color: @blue;
  }

  /* select end */

  /* time select start */

  .time-select-item.selected:not(.disabled),
  .el-range-editor.is-active,
  .el-range-editor.is-active:hover {
    border-color: @blue;
  }

  .el-range-editor:not(.is-disabled) {
    .el-range-input {
      color: @gray01;
    }
    .el-range-separator {
      width: auto;
      color: @gray03;
    }

    .el-range__icon {
      line-height: 30px;
    }

    .el-icon-time,
    .el-icon-date {
      color: @gray03;
    }
  }

  /* time select end */
  /* date picker start */
  .el-date-table {
    td.today:not(.end-date):not(.start-date) span {
      color: @blue;
    }

    td.start-date span,
    td.end-date span {
      background-color: @blue;
    }
  }

  .el-date-editor .el-range__close-icon {
    line-height: 30px;
  }
  .el-picker-panel__icon-btn:hover {
    color: @blue;
  }

  /* date picker end */
  /* date time picker start*/
  .el-date-table td.available:hover {
    color: @blue;
  }

  .el-date-table td.current:not(.disabled) span {
    color: #fff;
    background-color: @blue;
  }

  /* date time picker end */
  /* tag start */
  .el-tag {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    height: 22px;
    line-height: 22px;
    border-radius: 2px;

    + .el-tag {
      margin-left: 6px;
    }
    .el-icon-close {
      top: 0;
    }
  }

  .el-tag--dark {
    background-color: @blue;
    border-color: @blue;

    .el-tag__close:hover {
      background-color: transparent;
    }

    &.el-tag--success {
      background-color: @green-success;
      border-color: @green-success;
    }

    &.el-tag--info {
      background-color: @gray02;
      border-color: @gray02;
    }

    &.el-tag--danger {
      background-color: @red-error;
      border-color: @red-error;
    }

    &.el-tag--warning {
      background-color: @yellow-warning;
      border-color: @yellow-warning;
    }

    &.el-tag--cyan {
      background-color: #13c2c2;
      border-color: #13c2c2;
    }

    &.el-tag--greekblue {
      background-color: #2f54eb;
      border-color: #2f54eb;
    }
  }

  .el-tag--plain, .el-tag--light {
    color: @blue;
    background-color: #e6f7ff;
    border-color: #91d5ff;

    .el-tag__close:hover {
      color: inherit;
      background-color: transparent;
    }

    &.el-tag--success {
      color: @green-success;
      background-color: #f6ffed;
      border-color: #b7eb8f;
    }

    &.el-tag--info {
      color: @gray02;
      border-color: @gray-tab;
      background-color: #fafafa;
    }

    &.el-tag--danger {
      color: @red-error;
      background-color: #fff1f0;
      border-color: #ffa39e;
    }

    &.el-tag--warning {
      color: @yellow-warning;
      background-color: #fff7e6;
      border-color: #ffd591;
    }

    &.el-tag--cyan {
      color: #13c2c2;
      background-color: #e6fffb;
      border-color: #87e8de;
    }

    &.el-tag--greekblue {
      color: #2f54eb;
      background-color: #f0f5ff;
      border-color: #adc6ff;
    }
  }

  /* tag end */
  /* tabs start */
  .el-tabs__active-bar {
    display: none;
  }
  .el-tabs--bottom, .el-tabs--top {
    .el-tabs__item.is-bottom:nth-child(2),
    .el-tabs__item.is-top:nth-child(2) {
      padding-left: 20px;
    }
  }
  .el-tabs--bottom, .el-tabs--top  {
    .el-tabs__item.is-bottom:last-child,
    .el-tabs__item.is-top:last-child{
      padding-right: 20px;
    }
  }
  .el-tabs:not(.el-tabs--card):not(.el-tabs--border-card) {
    .el-tabs__item {
      position: relative;
      color: @gray02;
      &.is-active {
        color: @blue;
        &::before {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: 1;
          margin: 0 auto;
          width: 100%;
          animation: diffuse 0.5s;
          border-top: 2px solid @blue;
        }
      }
    }
  }
  .el-tabs.el-tabs--card {
    >.el-tabs__header .el-tabs__nav {
      border: none;
    }
    .el-tabs__item {
      padding: 0 15px;
      color: @gray02;
      border: 1px solid #E4E7ED;
      border-radius: 5px 5px 0 0;
      background-color: #f2f3f7;
      +.el-tabs__item {
        margin-left: 4px;
      }
      &.is-active {
        color: @blue;
        border-bottom: none;
        background-color: #fff;
        &::before {
          content: "";
          position: absolute;
          top: -1px;
          left: 0;
          right: 0;
          z-index: 1;
          margin: 0 auto;
          width: 100%;
          animation: diffuse 0.5s;
          border-top: 2px solid @blue;
        }
      }
    }
  }
  .el-tabs__header {
    margin-bottom: 20px;
  }
  .el-tabs__nav-wrap::after {
    height: 1px;
  }

  @keyframes diffuse {
    from {
      width: 0;
    }

    to {
      width: 100%;
    }
  }
  // }

  /* tabs end */

  /* table start */
  // 解决使用表格固定列时，表格未超宽情况下，固定列底部有一条线的bug
  :not(.el-table--scrollable-x) .el-table__body-wrapper {
    &.is-scrolling-left~.el-table__fixed,
    &.is-scrolling-none~.el-table__fixed,
    &.is-scrolling-none~.el-table__fixed-right,
    &.is-scrolling-right~.el-table__fixed-right {
      &::before {
        display: none;
      }
    }
  }
  .el-table {
    font-size: 14px;

    th {
      background-color: @gray-thead;
      .cell {
        padding-right: 0;
        font-size: 14px;
        font-weight: 500;
        color: @gray01;
      }
    }
    .table-header__handle .cell {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .el-icon-setting {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 47px;
        height: 47px;
        font-size: 20px;
        background-color: #e2e4e8;
        color: #999;
        cursor: pointer;
        &::before {
          content: "\e6ca";
        }
      }
    }
    .table-header__dropdown .cell {
      padding-left: 0;
      display: flex;
      .el-dropdown {
        padding-left: 0;
        .icongengduo {
          font-size: 12px;
          color: @gray-border;
        }
      }
    }
  }

  .el-table .cell,
  .el-table th div,
  .el-table--border td:first-child .cell,
  .el-table--border th:first-child .cell {
    padding-left: 20px;
  }

  /* table end */

  /* table-empty start */

  .el-table__empty-block {
    height: 256px;

    .el-table__empty-text {
      line-height: normal;

      &::before {
        content: "";
        display: block;
        margin: 0 auto 22px;
        width: 60px;
        height: 60px;
        background: url("../images/no-data_icon.png") no-repeat center;
      }
    }
  }

  /* table-empty end */
  /* alert start */
  .el-alert {
    padding: 8px 16px;
  }
  .el-alert--success.is-light {
    background-color: #f6ffed;
    border: 1px solid #b7eb8f;
    color: @green-success;
  }

  .el-alert--info.is-light {
    color: @blue;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
  }

  .el-alert--warning.is-light {
    color: @yellow-warning;
    background-color: #fffbe6;
    border: 1px solid #ffe58f;
  }

  .el-alert--error.is-light {
    color: @red-error;
    background-color: #fff1f0;
    border: 1px solid #ffa39e;
  }

  .el-alert--success.is-dark {
    background-color: @green-success;
  }

  .el-alert--info.is-dark {
    background-color: @blue;
  }

  .el-alert--warning.is-dark {
    background-color: @yellow-warning;
  }

  .el-alert--error.is-dark {
    background-color: @red-error;
  }

  .is-light .el-alert__content {
    color: @gray02;
    font-size: 14px;

    .el-alert__title {
      font-size: 14px;
    }
  }

  /* alert end*/
  /* form start */
  .el-form-item {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-form-item.is-error .el-input__inner,
  .el-form-item.is-error .el-input__inner:focus,
  .el-form-item.is-error .el-textarea__inner,
  .el-form-item.is-error .el-textarea__inner:focus,
  .el-message-box__input input.invalid,
  .el-message-box__input input.invalid:focus {
    border-color: @red-error;
  }

  // .el-form-item.is-success .el-input__inner,
  // .el-form-item.is-success .el-input__inner:focus,
  // .el-form-item.is-success .el-textarea__inner,
  // .el-form-item.is-success .el-textarea__inner:focus {
    // border-color: @gray-border;
  // }

  .el-form-item__error {
    color: @red-error;
  }

  .el-form-item__label {
    line-height: 32px;

    &::after {
      content: "：";
    }
  }

  .el-form-item__content,
  .el-input__icon {
    line-height: 32px;
  }

  /* form end */
  /* 状态点 start */
  .state-point {
    display: flex;
    align-items: center;

    &::before {
      content: "";
      display: block;
      margin-right: 6px;
      width: 6px;
      height: 6px;
      border-radius: 6px;
    }
  }

  .state-point-success::before {
    background-color: @green-success;
  }

  .state-point-error::before {
    background-color: @red-error;
  }

  .state-point-default::before {
    background-color: #d9d9d9;
  }

  .state-point-warning::before {
    background-color: @yellow-warning;
  }

  .state-point-loading::before {
    background-color: @blue;
  }

  .state-point-loading-scale::before {
    background-color: @blue;
    animation: stateScale 1.2s ease-in-out infinite;
  }

  @keyframes stateScale {
    from {
      transform: scale(0.8);
      box-shadow: 0 0 0 0 rgba(24, 144, 255, 0.1), 0 0 0 1px #fff,
        0 0 0 0 rgba(24, 144, 255, 0.6);
    }

    to {
      transform: scale(1);
      box-shadow: 0 0 0px 2px rgba(24, 144, 255, 0.1), 0 0 0 2px #fff,
        0 0 0 3px rgba(24, 144, 255, 0.6);
    }
  }

  /* 状态点 end */
  /* dialog start */
  .el-dialog {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  }

  .el-dialog__body {
    padding: 20px;
  }

  .el-dialog__headerbtn:focus .el-dialog__close,
  .el-dialog__headerbtn:hover .el-dialog__close {
    color: @blue;
  }

  /* dialog end */

  /* progress start */
  .el-progress-bar__inner {
    background-color: @blue;
  }

  .el-progress.is-exception {
    .el-progress-bar__inner {
      background-color: @red-error;
    }

    .el-progress__text {
      color: @red-error;
    }
  }

  .el-progress.is-success {
    .el-progress-bar__inner {
      background-color: @green-success;
    }

    .el-progress__text {
      color: @green-success;
    }
  }

  /* progress end*/
  /* cascader start */
  .el-cascader {
    line-height: 32px;
  }
  .el-cascader-panel {
    max-width: 720px;
    overflow-x: auto;
  }
  .el-cascader-node {
    &.in-active-path,
    &.is-active,
    &.is-selectable.in-checked-path {
      color: @blue;
    }
  }
  .el-cascader__tags .el-tag .el-icon-close {
    background: transparent;
    color: inherit;
  }
  /* cascader end */
  /* menu start */
  .el-menu-item.is-active {
    color: @blue;
  }
  /* menu end */
  /* message start */
  .el-message {
    top: 20px !important;
    padding: 8px 16px;
    .el-message__content {
      color: @gray02;
    }
    .el-icon-info {
      color: @blue;
    }
  }
  .el-message--success {
    background-color: #f6ffed;
    border-color: #b7eb8f;
  }
  .el-message--error {
    background-color: #fff1f0;
    border-color:#ffa39e;
  }
  .el-message-warning {
    background-color: #fffbe6;
    border-color: #ffe58f;
  }
  .el-message--info {
    background-color:#E6F7FF;
    border-color:#91D5FF;
  }
  /* message end */
  /* tooltip start */
  .tooltip-icon {
    font-weight: inherit;
    padding: 2px 0;
    border-bottom: 1px dashed @blue;
  }
  /* tooltip end */
}
