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

@component-namespace el {
  @b date-input {
    position: relative;
    & .el-tag {
      height: 24px;
      line-height: 24px;
      box-sizing: border-box;
      margin: 3px 0 3px 6px;
      color: #2aafff;
      background-color: #e5f5ff;
    }
    & .el-date-input__tags {
      position: absolute;
      line-height: normal;
      white-space: normal;
      z-index: 1;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  @b date-editor {
    position: relative;
    display: inline-block;

    &.el-input {
      width: 193px;
    }

    @m daterange {
      &.el-input {
        width: 220px;
      }
    }

    @m datetimerange {
      &.el-input {
        width: 350px;
      }
    }

    .el-picker-panel {
      position: absolute;
      min-width: 180px;
      box-sizing: border-box;
      box-shadow: 0 2px 6px #ccc;
      background: var(--color-white);
      z-index: 10;
      top: 41px;
    }
  }
}