/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../mixins/common.less';
@import '../custom.less';
@import './vars.less';

@date-range-picker-prefix-cls: ~'@{css-prefix}date-range-picker';
@date-panel-prefix-cls: ~'@{css-prefix}picker-panel';

&.@{date-range-picker-prefix-cls} {
  .inject-DateRange-vars();

  &.@{date-panel-prefix-cls} {
    width: 558px;
  }

  &.has-sidebar {
    width: 668px;
  }

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

  &__header {
    position: relative;
    text-align: center;
    padding: var(--tv-DateRange-header-padding);
    line-height: var(--tv-DateRange-line-height);
    border-bottom: 1px solid var(--tv-DateRange-header-border-color);
    margin-bottom: 12px;

    [class*='arrow-left'] {
      float: left;
    }

    [class*='arrow-right'] {
      float: right;
    }

    div {
      font-size: var(--tv-DateRange-font-size);
      font-weight: 500;
      margin-right: 50px;
    }
  }

  &__content {
    float: left;
    width: calc(50% - var(--tv-DateRange-left-content-margin-right));

    &.is-left {
      margin-right: var(--tv-DateRange-left-content-margin-right);
      padding-right: var(--tv-DateRange-left-content-padding-right);
      .@{date-range-picker-prefix-cls}__table {
        padding-left: 16px;
      }
    }

    &.is-right {
      margin-left: var(--tv-DateRange-right-content-margin-left);
      padding-left: var(--tv-DateRange-right-content-padding-left);

      .@{date-range-picker-prefix-cls}__table {
        padding-right: 16px;
      }
    }

    .@{date-range-picker-prefix-cls}__header div {
      margin-left: 50px;
    }
  }

  &__editors-wrap {
    display: table-cell;

    &.is-right {
      text-align: right;
      padding-left: var(--tv-DateRange-editors-wrap-padding-left);
    }
  }

  &__time-header {
    position: relative;
    font-size: var(--tv-DateRange-font-size);
    padding: var(--tv-DateRange-time-header-padding);
    display: table;
    width: 100%;

    & > .@{css-prefix}icon-arrow-right {
      font-size: var(--tv-DateRange-icon-size);
      vertical-align: middle;
      display: table-cell;
      color: var(--tv-DateRange-icon-color);
    }
  }

  &__time-picker-wrap {
    position: relative;
    display: table-cell;

    &:first-of-type {
      padding-right: var(--tv-DateRange-time-picker-padding-right);
    }
  }
}