// PADDINGS
$padding-small: 16px;
$padding-medium: 24px;
$padding-big: 32px;

// COLORS
$border-color: #ddd;
$body-color: #f5f5f5;
$primary-color: #124fa0;
$warning-color: #f44336;
$red-color: #f44336;
$green-color: #4caf50;
$yellow-color: #f1c40f;
$quickreply-highlight-color: rgba($primary-color, 0.1);
$actionable-highlight-color: #f5f5f5;
$knob-color: #ddd;

// OTHER
$transition: 0.2s ease-out;
$default-font-size: 14px;
$carousel-font-size: 16px;
$font: "Roboto", sans-serif;

// Z-INDEX
$z-index: 999999999;

$width: 300px;
$screen-width: 360px;
$drawer-width: 360px;
$border-radius: 24px;

@mixin textMessage {
  width: $width;
  max-width: $width;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.02);
  border-radius: $border-radius;
  overflow: hidden;
  border: 1px solid $border-color;
  border-top-left-radius: 4px;
  padding: 12px;
  font-size: $default-font-size;
  border-top-right-radius: $border-radius;
  box-sizing: border-box;
  background-color: $body-color;
  line-height: 1.4;
  &:global(.small) {
    padding: 8px;
    border-radius: 16px;
    border-top-left-radius: 4px;
  }
}

@mixin textMessageInput {
  font-size: inherit;
  color: inherit;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0;
  outline: none;
  resize: none;
  border: none;
  pointer-events: none;
  width: 100%;
  overflow: hidden;
}

@mixin absoluteFill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}