/**
* 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 '../custom.less';
@import './vars.less';

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

.@{picker-panel-prefix-cls} {
  .inject-DatePanel-vars();

  color: var(--tv-DatePanel-text-color);
  font-size: var(--tv-DatePanel-font-size);
  box-shadow: var(--tv-DatePanel-box-shadow);
  background: var(--tv-DatePanel-bg-color);
  border-radius: var(--tv-DatePanel-border-radius);
  line-height: var(--tv-DatePanel-line-height);
  margin: var(--tv-DatePanel-margin);
  width: var(--tv-DatePanel-width);

  &__body-wrapper {
    position: relative;
    border: solid 1px var(--tv-DatePanel-border-color-divider);
  }

  &.has-sidebar.has-time {
    min-width: 434px;
  }

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

  &.@{month-range-prefix-cls} {
    width: 558px;
  }

  &.@{date-range-prefix-cls}.has-sidebar {
    width: 668px;
  }

  &.has-time {
    .@{picker-panel-prefix-cls}__body-wrapper {
      position: relative;
    }
  }

  // 快捷选项
  [slot='sidebar'],
  &__sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 110px;
    border-right: 1px solid var(--tv-DatePanel-border-color-divider);
    padding-top: var(--tv-DatePanel-sidebar-padding-top);
    overflow: auto;

    .@{picker-panel-prefix-cls}__shortcut {
      display: block;
      width: 100%;
      border: 0;
      background-color: transparent;
      line-height: var(--tv-DatePanel-line-height);
      font-size: var(--tv-DatePanel-font-size);
      color: var(--tv-DatePanel-text-color);
      padding: var(--tv-DatePanel-shortcut-padding);
      text-align: left;
      outline: 0;
      cursor: pointer;

      &:hover {
        background-color: var(--tv-DatePanel-bg-color-hover);
      }
    }

    & + .@{picker-panel-prefix-cls}__body {
      margin-left: 110px;
    }
  }

  // 面板主体
  &__body-wrapper::after,
  &__body::after {
    content: '';
    display: table;
    clear: both;
  }

  &__body {
    padding-bottom: 8px;

    // 头部-时间选择输入框
    .@{date-picker-prefix-cls}__time-header {
      padding: var(--tv-DatePanel-time-header-padding);
      position: relative;
      display: table;
      width: 100%;

      .@{date-picker-prefix-cls}__editor-wrap {
        position: relative;
        display: table-cell;

        &:first-child {
          padding-right: var(--tv-DatePanel-editor-wrap-padding-right);
        }
      }
    }

    // 头部-年月选择
    .@{date-picker-prefix-cls}__header {
      padding: var(--tv-DatePanel-header-padding);
      text-align: center;

      .@{date-picker-prefix-cls}__prev-btn {
        float: left;
      }

      .@{date-picker-prefix-cls}__next-btn {
        float: right;
      }

      &-label {
        padding: var(--tv-DatePanel-header-label-padding);
        cursor: pointer;

        &.active,
        &:hover {
          color: var(--tv-DatePanel-text-color-heightlight);
        }
      }
    }

    //
    .@{picker-panel-prefix-cls}__content {
      position: relative;
      border-top: solid 1px var(--tv-DatePanel-border-color-divider);
      padding: var(--tv-DatePanel-content-padding);

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

  // 时区选择
  &__timezone {
    padding: 8px 0;

    .@{picker-panel-prefix-cls}__tzlist {
      z-index: 10;
      overflow-y: hidden;

      &-li {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: var(--tv-DatePanel-timezone-li-padding, 5.5px 16px);
        cursor: pointer;

        &:hover {
          background-color: var(--tv-DatePanel-bg-color-hover, #f5f5f5);
        }
      }

      .@{css-prefix}popup {
        position: absolute;
        width: 238px;
        bottom: 77px;
        max-height: 260px;
        box-shadow: var(--tv-DatePanel-box-shadow, 0 4px 16px 0 rgba(0, 0, 0, 0.08));
        background-color: var(--tv-DatePanel-bg-color, #fff);
      }
    }

    .@{input-prefix-cls} {
      position: relative;
    }
  }

  // 底部
  &__footer {
    border-top: 1px solid var(--tv-DatePanel-border-color-divider);
    padding: var(--tv-DatePanel-footer-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .@{button-prefix-cls} {
      min-width: 60px;

      &:only-child {
        float: right;
      }
    }

    .@{button-prefix-cls}--text {
      text-align: left;
    }
  }

  /*  公共样式 */
  // 头部按钮
  .@{picker-panel-prefix-cls}__icon-btn {
    height: var(--tv-DatePanel-header-btn-height);
    padding: var(--tv-DatePanel-header-btn-padding);
    border: 0;
    background: unset;
    cursor: pointer;
    outline: 0;

    .tiny-svg {
      font-size: var(--tv-DatePanel-icon-size);
      fill: var(--tv-DatePanel-icon-color);

      &:hover {
        fill: var(--tv-DatePanel-icon-color-hover);
      }
    }
  }

  .tiny-picker-panel__table {
    padding: 0 16px;
  }
}
