@import "../common/var.css";

@component-namespace el {
  @b picker-panel {
    color: var(--datepicker-color);
    border: 1px solid var(--datepicker-border-color);
    /*box-shadow: 0 2px 6px #ccc;*/
    background: var(--color-white);
    border-radius: 2px;
    line-height: 20px;
    margin: 5px 0;

    @e body, body-wrapper {
      &::after {
        content: "";
        display: table;
        clear: both;
      }
    }

    @e content {
      position: relative;
      margin: 12px;
    }

    @e footer {
      border-top: 1px solid var(--datepicker-inner-border-color);
      padding: 4px;
      text-align: right;
      background-color: var(--color-white);
      position: relative;
    }
/*wbx add begin*/
    @e custom-range{
      text-align: center;
      font-size: 14px;
      padding:3px 0px;
      line-height: 32px;
    }
/*wbx add end*/

    @e btn {
      border: 1px solid #dcdcdc;
      color: #333;
      line-height: 24px;
      border-radius: 2px;
      padding: 0 20px;
      cursor: pointer;
      background-color: transparent;
      outline: none;
      font-size: 12px;

      &[disabled] {
        color: #cccccc;
        cursor: not-allowed;
      }
    }

    @e icon-btn {
      font-size: 14px;
      border: 0;
      background: transparent;
      cursor: pointer;
      /*outline: none; *wbx edit*/
      margin-top: 3px;
    }

    @e link-btn {
      cursor: pointer;
      color: var(--color-primary);
      text-decoration: none;
      padding: 15px;
      font-size: 12px;
    }
@e shortcut {
    display: block;
    border:none;
    width: 100%;
    border: 0;
    background-color: transparent;
    font-size: 14px;
    cursor: pointer;
    /*--wbx edit begin--*/
    line-height: 32px;
    height: 32px;
    color: var(--color-black);
    padding-left: 6px;
    text-align: center;
    border-radius:0;

    &:focus {
        /*background-color: var(--datepicker-cell-hover-color);*/
        color:var(--color-primary);
        border-bottom:1px solid var(--color-primary) ;
        border-color:var(--color-primary);
    }

    &:hover {
        /*background-color: var(--datepicker-cell-hover-color);*/
        color:var(--color-primary);
        border-bottom:1px solid var(--color-primary) ;
        border-color:var(--color-primary);
        /*--wbx edit end--*/
    }

    &.active {
        background-color: #e6f1fe;
        color: var(--datepicker-active-color);
    }
}
  }

  .el-picker-panel *[slot=sidebar],
  .el-picker-panel__sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 260px;
    /*border-right: 1px solid var(--datepicker-inner-border-color);*wbx remove*/
    box-sizing: border-box;
    padding-top: 12px;/*--wbx edit--*/
    /*background-color: var(--color-dark-white);*wbx remove*/
  }
  .el-picker-panel__sideborder {
    border-right: 1px solid #d7d7d8;
    height: 290px;
    padding: 0 11px;
      fieldset {
          border: none;
          padding: 0;
          margin: 0;
      }
  }
  .el-picker-panel__data-range {
      display: none;
  }
  .el-picker-panel *[slot=sidebar] + .el-picker-panel__body,
  .el-picker-panel__sidebar + .el-picker-panel__body {
      margin-left: 260px;
  }
}
