@value * as vars from "../../styles/variables.css";

.base {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;

  background-color: var(--chat-primary-bg-color);
  border-left: 1px solid var(--chat-primary-border-color);
}

.horizontal-padding {
  padding-left: vars.chat-window-horiz-pd;
  padding-right: vars.chat-window-horiz-pd;
}

.window {
  composes: base;

  height: 100%;
  width: 47vw;
  min-width: 350px;
}

.tab {
  composes: base;

  height: vars.chat-tab-height;
  width: vars.chat-tab-width;

  border: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);

  .horizontal-padding {
    padding-left: vars.chat-tab-horiz-pd;
    padding-right: vars.chat-tab-horiz-pd;
  }
}

.shrinked-tab {
  composes: tab;

  height: auto;
}

.hidden {
  display: none !important;
}