@use './bottom-bar-util';
@use '../colors';

.root {
  display: flex;
  align-items: center;
  position: relative;
  background: colors.$basic-white;
  overflow: hidden;
  height: var(--bottom-bar-height);
  flex-shrink: 0; // ВАЖНО: для использования в Modal

  // чтобы разделитель был над контентом делаем через pseudo-элемент
  &.divided::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    box-shadow: inset 0 1px 0 colors.$basic-gray12;
  }
}

.size-s {
  @include bottom-bar-util.size-s;
}

.size-m {
  @include bottom-bar-util.size-m;
}

.size-l {
  @include bottom-bar-util.size-l;
}

.rounds-s {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.rounds-m {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}