@import 'variable';
@import '../../../styles/mixins.scss';

.#{$hashClassName}.cn-ui-m-select-confirm-drawer {
  --cn-list-title-color: #{$m-color-text};
  --cn-list-title-font-size: #{$m-font-size-body-1};
  --cn-list-item-min-height: #{$m-s-48};
  --cn-list-divider-border-bottom-color: #{$m-color-bg-disabled};
  --cn-list-item-padding-lr: #{$m-s-16};
  border-top-left-radius: #{$m-radius-largest};
  border-top-right-radius: #{$m-radius-largest};

  .cn-ui-m-select-confirm-drawer {
    &-container {
      @include flex(column, flex-start, stretch);
      max-height: 60vh;
    }

    &-header {
      @include flex(row, flex-start);
      margin: 0 0 0 $m-s-16;
      font-size: $m-font-size-headline-6;
      font-weight: $m-font-weight-semi-bold;
      color: $m-color-text-title1;
      border-bottom: var(--cn-list-border-width) solid
        var(--cn-list-divider-border-bottom-color);

      &-total {
        padding: $m-s-16 0;
        flex: 1;
      }

      &-close {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: $m-s-16;

        .cn-ui-m-icon {
          color: $m-color-bg-dark;
        }
      }
    }

    &-body {
      flex: 1;
      @include limitedOverScroll();
      overflow-y: scroll;
    }
  }
}