@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../styles/mixins.scss';

$class-prefix: 'cn-ui-m';
$sizes: small, medium, large;

$-header-button-font-size: $m-s-15;
$-title-font-size: $m-s-15;
$-item-font-size: $m-s-16;
$-item-height: $m-s-34;
$-color-border: $m-color-bg-light;

.#{$hashClassName}.#{$class-prefix}-picker-popup {
  & .#{$class-prefix}-popup-body {
    border-top-left-radius: $m-s-8;
    border-top-right-radius: $m-s-8;
  }

  .#{$class-prefix}-picker {
    width: 100%;
    height: calc(#{$m-s-150} * 2);
    background-color: white;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;

    .#{$class-prefix}-picker-header {
      flex-shrink: 0;
      border-bottom: solid $m-s-1 $-color-border;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: $m-s-4 $m-s-4;
      &-button {
        font-size: $-header-button-font-size;
        display: inline-block;
        padding: $m-s-8 $m-s-8;
        &-disabled {
          &,
          &:active {
            opacity: 0.4;
            cursor: not-allowed;
          }
        }
      }
      &-title {
        padding: $m-s-4 $m-s-4;
        font-size: $-title-font-size;
        color: $m-color-text;
        text-align: center;
        flex: 1;
      }
    }

    .#{$class-prefix}-picker-body {
      flex: 1;
      width: 100%;
      height: 100%;

      > .#{$class-prefix}-picker-view {
        --height: 100%;
      }
    }
  }
}