// Start of default variables
$body-bg: "" !default;
$body-color: "" !default;
$chat-entry-border-color: "" !default;
$delivered-url: "" !default;
$hover-bg: "" !default;
$incoming-message-bg: "" !default;
$input-bg: "" !default;
$input-border-color: "" !default;
$input-border-width: "" !default;
$input-box-shadow: "" !default;
$input-color: "" !default;
$input-focus-bg: "" !default;
$input-focus-border-color: "" !default;
$input-focus-box-shadow: "" !default;
$input-placeholder-color: "" !default;
$input-plaintext-color: "" !default;
$message-color: "" !default;
$message-input-border: "" !default;
$message-metadata-color: "" !default;
$outgoing-message-bg: "" !default;
$primary: "" !default;
$read-url: "" !default;
$sending-url: "" !default;
$sent-message-bg: "" !default;
$sent-message-link-visited: "" !default;
$sent-message-link: "" !default;
$sent-url: "" !default;
// End of default variables

@use "sass:color";
$sent-message-link-visited: color.adjust($sent-message-link, $lightness: -10%);
$default-radius: 5px;

// Start bootstrap override
$dropdown-bg: $body-bg;
$dropdown-link-hover-bg: $hover-bg;
$dropdown-color: $body-color;
$dropdown-link-color: $body-color;
$dropdown-link-hover-color: $body-color;
$dropdown-border-color: $body-color;

$modal-content-color: $body-color;
$modal-content-bg: $body-bg;
$modal-content-border-color: $body-color;
$close-color: $body-color;

$link-color: $primary;
// End of bootstrap override

@use "bootstrap/scss/bootstrap";

// All variables are now loaded, we can use them
.row.chat-entry {
  border-bottom: 1px solid $chat-entry-border-color;
}

.message {
  color: $message-color;
  a {
    color: $sent-message-link;
    &:visited {
      color: $sent-message-link-visited;
    }
  }
}

.outgoing .message {
  background-color: $outgoing-message-bg;
}
.incoming .message {
  background-color: $incoming-message-bg;
}
.message .meta {
  color: $message-metadata-color;
}

.transfer-indicator {
  background-image: url("../assets/images/" + $sending-url);
}
.sent .transfer-indicator {
  background-image: url("../assets/images/" + $sent-url);
}
.delivered .transfer-indicator {
  background-image: url("../assets/images/" + $delivered-url);
}
.read .transfer-indicator {
  background-image: url("../assets/images/" + $read-url);
}

.messageInputBox {
  background-color: $body-bg;
}

#messageInput {
  border: 1px solid $message-input-border;
  background-color: $input-bg;
}

.vue-phone-number-input {
  background-color: $input-bg;
  color: $input-color;
}

.info {
  background-color: $body-bg;
}

.warning-box {
  position: relative;
  color: #000;
  border: solid 2px #f80;
  border-radius: $default-radius;
  background-color: #f80a;
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
}

.close-warning-box {
  position: absolute;
  top: 0px;
  right: 5px;
  font-size: 20px;
  color: #e60;
  font-weight: bold;
}

.modal {
  background: #000e;
}

@font-face {
  font-family: 'ubuntu';
  src: url('fonts/ubuntu-r-webfont.woff2') format('woff2'),
       url('fonts/ubuntu-r-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

body{
  font-size:14px;
}