/*
 * Copyright 2019 dialog LLC <info@dlg.im>
 */

@import '../../styles/variables.css';

.container {
  text-align: center;
  transition: transform 150ms ease-out;
  z-index: calc(var(--z-index-call) + 10);
  padding: var(--default-padding-large) 0;
  position: relative;
  transform: translateZ(0);
}

.button {
  margin: 0 5px;
}

.bigButton {
  padding: 4px;
}

.hide {
  transform: translateY(100px);
}

.onCall {
  padding: calc(var(--default-padding) / 2) 0;
  box-shadow: inset 0 1px 0 0 color-mod(#000 alpha(4%));
  background-color: color-mod(#000 alpha(1%));

  &.withVideo {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    box-shadow: none;
    background-color: transparent;
  }
}

.large {
  padding: 0 0 var(--default-padding-large);
  box-shadow: none;
  background-color: transparent;
}