@import '../../style/themes/index';

@drawer-prefix-cls: ~'@{ant-prefix}-bottom-sheet';
@picker-prefix-cls: ~'@{ant-prefix}-picker';
@drawer-animation-ease: @ease-out-quint;

.@{drawer-prefix-cls} {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindex-modal;
  pointer-events: none;

  &-inline {
    position: absolute;
  }

  // ====================== Mask ======================
  &-mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: @zindex-modal;
    background: @modal-mask-bg;
    pointer-events: auto;
  }

  // ==================== Content =====================
  &-content-wrapper {
    position: absolute;
    z-index: @zindex-modal;
    transition: all @animation-duration-slow;

    &-hidden {
      display: none;
    }

    // Placement
    .@{drawer-prefix-cls}-left > & {
      top: 0;
      bottom: 0;
      left: 0;
      box-shadow: @shadow-1-right;
    }

    .@{drawer-prefix-cls}-right > & {
      top: 0;
      right: 0;
      bottom: 0;
      box-shadow: @shadow-1-left;
    }

    .@{drawer-prefix-cls}-top > & {
      top: 0;
      right: 0;
      left: 0;
      box-shadow: @shadow-1-down;
    }

    .@{drawer-prefix-cls}-bottom > & {
      right: 0;
      bottom: 0;
      left: 0;
      //remove backdrop color in radius top
      //box-shadow: @shadow-1-up;
    }
  }

  &-content {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: @drawer-bg;
    //msb overwrite start
    border-radius: @bottom-sheet-border-radius;
    pointer-events: auto;
    //msb overwrite end
  }

  // ===================== Panel ======================
  &-wrapper-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  // Header
  &-header {
    display: flex;
    flex: 0;
    padding: 26px @padding-sm @padding-sm @padding-sm;
    //msb overwrite start
    border-bottom: @border-width-base @border-style-base @color-gray-200;
    //msb overwrite end

    &-title {
      display: flex;
      flex: 1;
      align-items: center;
      min-width: 0;
      min-height: 0;
      text-align: center;
    }
    .@{drawer-prefix-cls}-icon-left {
      display: inline-block;
      color: @color-gray-500;
      font-weight: 700;
      font-size: @title-1-size;
      font-style: normal;
      line-height: 1;
      text-align: center;
      text-transform: none;
      text-decoration: none;
      background: transparent;
      border: 0;
      outline: 0;
      cursor: pointer;
      transition: color @animation-duration-slow;
      text-rendering: auto;

      &:focus,
      &:hover {
        color: @icon-color-hover;
        text-decoration: none;
      }
    }
  }

  //msb overwrite start
  &-indicator {
    position: absolute;
    top: 6px;
    right: 0;
    left: 0;
    width: @bottom-sheet-width-indicator;
    height: @bottom-sheet-height-indicator;
    margin: auto;
    overflow: auto;
    background-color: @color-gray-200;
    border-radius: @bottom-sheet-border-radius-indicator;
  }
  //msb overwrite end

  &-close {
    display: inline-block;
    //msb overwrite start
    align-self: flex-start;
    margin-left: 12px;
    color: @color-gray-500;
    //msb overwrite end
    font-weight: 700;
    font-size: @title-1-size;
    font-style: normal;
    line-height: 1;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: color @animation-duration-slow;
    text-rendering: auto;

    &:focus,
    &:hover {
      color: @icon-color-hover;
      text-decoration: none;
    }
  }

  &-title {
    flex: 1;
    margin: 0;
    //msb overwrite start
    color: @color-gray-800;
    font-weight: @typography-font-medium;
    font-size: @mobile-subtitle-3-size;
    line-height: @subtitle-line-height * 1px;
    //msb overwrite end
  }

  // Body
  &-body {
    flex: 1;
    min-width: 0;
    min-height: 0;
    //msb overwrite start
    padding: @padding-sm;
    //msb overwrite end
    overflow: auto;
  }

  // Footer
  &-footer {
    flex-shrink: 0;
    padding: @drawer-footer-padding-vertical @drawer-footer-padding-horizontal;
    border-top: @border-width-base @border-style-base @border-color-split;
  }
}