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

@mini-picker-prefix-cls: ~'@{css-prefix}mobile-mini-picker';

.@{mini-picker-prefix-cls} {
  &__mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--ti-mobile-mini-picker-mask-background, rgba(0, 0, 0, 0.6));
    z-index: 1000;
  }

  &__content {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--ti-mobile-mini-picker-content-bgcolor, #ddd);
    transform: translate(0, 100%);
    backface-visibility: hidden;
    transition: transform 0.3s;
    z-index: 5000;

    &.is-toggle {
      transform: translate(0, 0);
    }
  }

  &__toolbar {
    position: relative;
    display: flex;
    height: var(--ti-mobile-mini-picker-toolbar-height, 44px);
    line-height: var(--ti-mobile-mini-picker-toolbar-height, 44px);
    padding: 0 17px;
    background-color: var(--ti-mobile-mini-picker-toolbar-bgcolor, #fff);
    font-size: var(--ti-mobile-mini-picker-toolbar-font-size, 14px);
    text-align: center;
    .hairline(
      'bottom',
      var(--ti-mobile-mini-picker-toolbar-border-color, #ddd)
    );

    .picker_action {
      display: block;
      flex: 1;
      color: var(--ti-mobile-mini-picker-toolbar-action-color, #039be5);
    }

    .picker_cancel {
      color: var(--ti-mobile-mini-picker-toolbar-cancel-color, #666);
      text-align: left;
    }

    .picker_title {
      color: var(--ti-mobile-mini-picker-toolbar-title-color, #333);
      font-size: var(--ti-mobile-mini-picker-toolbar-title-font-size, 17px);
      font-family: 'PingFangSC-Regular';
    }

    .picker_confirm {
      text-align: right;
    }
  }

  &__columns {
    position: relative;
    display: flex;
    height: 238px;
    background-color: var(--ti-mobile-mini-picker-columns-bgcolor, #fff);
    overflow: hidden;
  }
}
