/**
* 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';

@time-panel-prefix-cls: ~'@{css-prefix}time-panel';

.@{time-panel-prefix-cls} {
  .inject-TimePanel-vars();

  margin: var(--tv-TimePanel-margin);
  font-size: var(--tv-TimePanel-font-size);
  background-color: var(--tv-TimePanel-bg-color);
  box-shadow: var(--tv-TimePanel-box-shadow);
  border-radius: var(--tv-TimePanel-border-radius);
  position: absolute;
  width: var(--tv-TimePanel-width);
  left: 0;
  z-index: 1000;
  box-sizing: content-box;
  padding: var(--tv-TimePanel-padding);
  .user-select(none);

  // 右侧对齐,用于避免右侧超出视口
  &.is-align-right {
    left: auto;
    right: 0;
  }

  // 左侧对齐,用于避免左侧超出视口
  &.is-align-left {
    left: 0;
    right: auto;
  }

  &__header {
    display: block;
  }

  &__header-title {
    display: flex;
    justify-content: space-around;
    margin: var(--tv-TimePanel-header-margin);
    color: var(--tv-TimePanel-header-text-color);
    align-items: center;
  }

  &__content {
    font-size: 0;
    position: relative;
    overflow: hidden;
    padding-bottom: var(--tv-TimePanel-content-padding-bottom);

    &:after,
    &:before {
      display: none;
      content: '';
      top: 50%;
      position: absolute;
      margin-top: -19px;
      height: 32px;
      z-index: -1;
      left: 0;
      right: 0;
      box-sizing: border-box;
      padding-top: 6px;
      text-align: left;
      border-top: 1px solid var(--tv-TimePanel-border-color-divider);
      border-bottom: 1px solid var(--tv-TimePanel-border-color-divider);
    }

    &:after {
      left: 50%;
      margin-left: 12%;
      margin-right: 12%;
    }

    &:before {
      padding-left: 50%;
      margin-right: 12%;
      margin-left: 12%;
    }

    &.has-seconds {
      &:after {
        left: calc(100% / 3 * 2);
      }

      &:before {
        padding-left: calc(100% / 3);
      }
    }
  }

  &__footer {
    border-top: 1px solid var(--tv-TimePanel-border-color-divider);
    text-align: right;
    box-sizing: border-box;
    padding: var(--tv-TimePanel-footer-padding);
    margin: var(--tv-TimePanel-footer-margin);
  }

  // TODO: 待确认有没有这种无边框场景，没有的话去掉
  &__btn.tiny-button {
    min-width: inherit;
    border: none;
    height: var(--tv-TimePanel-btn-height);
    padding: var(--tv-TimePanel-btn-padding);
    margin: 0 5px;
    cursor: pointer;
    background-color: transparent;
    outline: 0;
    font-size: 12px;
    border-radius: var(--tv-TimePanel-btn-border-radius);
    transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

    &.confirm {
      font-weight: var(--tv-TimePanel-btn-font-weight);
      color: var(--tv-TimePanel-confirm-text-color);
    }
  }
}