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

$class-prefix: 'cn-ui-m';

.#{$class-prefix}-bottom-btn {
  padding: var(--cn-bottom-button-padding-tb) var(--cn-bottom-button-padding-lr);

  &--dividing {
    box-shadow: rgba(0, 0, 0, 0.09) 0 -1px 5px 0;
    z-index: 1;
  }

  &--safe {
    @include safeArea(padding-bottom, var(--cn-bottom-button-padding-tb));
  }

  &-container {
    display: grid;
    grid-column-gap: var(--cn-bottom-button-btn-gap);
    grid-template-columns: 1fr;

    &--col-2 {
      grid-template-columns: 1fr 1fr;
    }
  }

  &-extra {
    padding-bottom: var(--cn-bottom-button-row-gap);
  }
}