@import '../common/var.scss';

.qf-date-picker {
  width: 322px;

  .qf-picker-panel__content {
    width: 292px
  }

  table {
    table-layout: fixed;
    width: 100%
  }

  &.qf-popper {
    padding: 0;
    text-align: center;

    &.qf-popper[x-placement^=top] {
      margin-bottom: 4px;
    }

    &.qf-popper[x-placement^=bottom] {
      margin-top: 4px;
    }
  }
}

.qf-date-picker.has-sidebar {
  width: 438px
}

.qf-date-picker__header {
  margin: 12px;
  text-align: center
}

.qf-date-picker__header--bordered {
  margin-bottom: 0;
  padding-bottom: 12px;
  border-bottom: solid 1px #ebeef5
}

.qf-date-picker__header--bordered + .qf-picker-panel__content {
  margin-top: 0
}

.qf-date-picker__header-label {
  font-size: 16px;
  font-weight: 500;
  padding: 0 5px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  color: $--color-font-light-1;
}

.qf-date-picker__header-label.active, .qf-date-picker__header-label:hover {
  color: $--color-primary;
}

.qf-date-picker__prev-btn {
  float: left
}

.qf-date-picker__next-btn {
  float: right
}

.qf-date-picker__time-wrap {
  padding: 10px;
  text-align: center
}

.qf-date-picker__time-label {
  float: left;
  cursor: pointer;
  line-height: 30px;
  margin-left: 10px
}