@use "sass:color";

// **************
//     COLORS
// **************
// these are "base" colors that are used by other variables.
$ACCENT_COLOR: #c1ceb1 !default;

$DARK_1: color.scale($ACCENT_COLOR, $lightness: -25%, $saturation: -97%) !default;
$DARK_2: color.scale($ACCENT_COLOR, $lightness: -30%, $saturation: -60%) !default;
$DARK_3: color.scale($ACCENT_COLOR, $lightness: -80%, $saturation: -70%) !default;

$LIGHT: color.scale($ACCENT_COLOR, $lightness: 40%, $saturation: -60%) !default;
$LIGHT_2: color.scale($ACCENT_COLOR, $lightness: 60%, $saturation: -60%) !default;

$MAIN_BG: color.scale($ACCENT_COLOR, $lightness: -10%, $saturation: -40%) !default;

$BUTTON_COLOR: color.adjust($ACCENT_COLOR, $hue: 90) !default;
$BUTTON_COLOR_2: color.adjust($ACCENT_COLOR, $hue: 180) !default;

$ACCORDION_COLOR: color.adjust($ACCENT_COLOR, $hue: 140, $lightness: -10%, $saturation: -15%) !default;

$DEFAULT_FONT_COLOR: black !default;
$DEFAULT_FONT_COLOR_INVERSE: white !default;

$BUTTON_COLOR_WARN: #fbfb8d !default;
$BUTTON_COLOR_CRITICAL: red !default;
$BUTTON_WARN_FONT_COLOR: $DEFAULT_FONT_COLOR !default;
$BUTTON_CRITICAL_FONT_COLOR: $DEFAULT_FONT_COLOR_INVERSE !default;

// **************
//  UNITS & SIZE
// **************
// these are used within margins and paddings and other miscellaneous sizing.

$ZERO_PADDING: 0 !default;
$SMALL_PADDING: 5px !default;
$MEDIUM_PADDING: 10px !default;
$MEDIUM_BIG_PADDING: 15px !default;
$BIG_PADDING: 20px !default;
$BIGGER_PADDING: 30px !default;

$PAGE_SIDE_MARGIN: 100px !default;

$SETTINGS_WIDTH: 40% !default;

// **************
//     BORDERS
// **************
$DEFAULT_BORDER: 1px solid black !default;
$DEFAULT_BORDER_RADIUS: 4px !default;

// other variables can be found before the rule that uses them. they are usually constructed from these basic variables.

@font-face {
  font-family: "site-title";
  src: url("/static/fonts/ChicagoFLF.woff2");
}

@mixin cadman($var) {
  font-family: "Cadman";
  src: url("/static/fonts/Cadman_#{$var}.woff2");
}

@font-face {
  @include cadman("Roman");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  @include cadman("Bold");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  @include cadman("Italic");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  @include cadman("BoldItalic");
  font-weight: bold;
  font-style: italic;
}

$button_border: $DEFAULT_BORDER !default;
$button_padding: $SMALL_PADDING $BIG_PADDING !default;
$button_border_radius: $DEFAULT_BORDER_RADIUS !default;
$button_margin: $MEDIUM_PADDING $ZERO_PADDING !default;
%button-base {
  cursor: default;
  font-size: 0.9em;
  font-family: "Cadman";
  text-decoration: none;
  border: $button_border;
  border-radius: $button_border_radius;
  padding: $button_padding;
  margin: $button_margin;
}

$reduced_button_margin: $ZERO_PADDING !default;
$reduced_button_padding: $SMALL_PADDING !default;
@mixin button($color, $font_color) {
  @extend %button-base;
  background-color: $color;
  color: $font_color !important; //!important because linkbutton is an <a>
  
  &:hover {
    background-color: color.scale($color, $lightness: 20%);
  }
  
  &:active {
    background-color: color.scale($color, $lightness: -10%, $saturation: -70%);
  }
  
  &:disabled {
    background-color: color.scale($color, $lightness: 30%, $saturation: -90%);
  }

  &.reduced {
    margin: $reduced_button_margin;
    padding: $reduced_button_padding;
  }
}

$navbar_padding: $MEDIUM_PADDING !default;
$navbar_margin: 0 !default;
@mixin navbar($color) {
  padding: $navbar_padding;
  margin: $navbar_margin;
  display: flex;
  justify-content: end;
  background-color: $color;
}

$body_margin: $BIG_PADDING $PAGE_SIDE_MARGIN !default;
body {
  font-family: "Cadman";
  // font-size: 18px;
  margin: $body_margin;
  background-color: $MAIN_BG;
  color: $DEFAULT_FONT_COLOR;
}

$link_color: #c11c1c !default;
$link_color_visited: #730c0c !default;
a{
  &:link {
    color: $link_color;
  }
  &:visited {
    color: $link_color_visited;
  }
}

.big {
  font-size: 1.8rem;
}

$topnav_color: $ACCENT_COLOR !default;
#topnav {
  @include navbar($topnav_color);
  justify-content: space-between;
  align-items: baseline;
}

$bottomnav_color: $DARK_1 !default;
#bottomnav {
  @include navbar($bottomnav_color);
}

$darkbg_color: $DARK_1 !default;
.darkbg {
  padding-bottom: $MEDIUM_PADDING;
  padding-left: $MEDIUM_PADDING;
  padding-right: $MEDIUM_PADDING;
  background-color: $darkbg_color;
}

$user_actions_gap: $MEDIUM_BIG_PADDING !default;
.user-actions {
  display: flex;
  column-gap: $user_actions_gap;
}

$site_title_margin: $ZERO_PADDING $BIG_PADDING !default;
$site_title_size: 3rem !default;
$site_title_color: $DEFAULT_FONT_COLOR !default;
.site-title {
  font-family: "site-title";
  font-size: $site_title_size;
  margin: $site_title_margin;
  text-decoration: none;
  color: $site_title_color !important;
}

$thread_title_margin: $ZERO_PADDING !default;
$thread_title_size: 1.5rem !default;
.thread-title {
  margin: $thread_title_margin;
  font-size: $thread_title_size;
  font-weight: bold;
}

$post_usercard_width: 200px !default;
$post_border: 2px outset $DARK_2 !default;
.post {
  display: grid;
  grid-template-columns: $post_usercard_width 1fr;
  grid-template-rows: 1fr;
  gap: $ZERO_PADDING;
  grid-auto-flow: row;
  grid-template-areas:
    "usercard post-content-container";
  border: $post_border;
}

$usercard_padding: $BIG_PADDING $MEDIUM_PADDING !default;
$usercard_border: 4px outset $LIGHT !default;
$usercard_border_right: solid 2px !default;
$usercard_background: $DARK_1 !default;
.usercard {
  grid-area: usercard;
  padding: $usercard_padding;
  border: $usercard_border;
  background-color: $usercard_background;
  border-right: $usercard_border_right;
}

.usercard-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  top: $MEDIUM_PADDING;
  position: sticky;
}

$post_content_gap: $ZERO_PADDING !default;
.post-content-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content 1fr min-content;
  gap: $post_content_gap;
  grid-auto-flow: row;
  grid-template-areas:
    "post-info"
    "post-content"
    "post-reactions";
  grid-area: post-content-container;

  min-height: 100%;
}

$post_info_min_height: 70px !default;
$post_info_padding: $SMALL_PADDING $BIG_PADDING !default;
$post_info_border_top: $DEFAULT_BORDER !default;
$post_info_border_bottom: $DEFAULT_BORDER !default;
.post-info {
  grid-area: post-info;
  display: flex;
  min-height: $post_info_min_height;
  justify-content: space-between;
  padding: $post_info_padding;
  align-items: center;
  border-top: $post_info_border_top;
  border-bottom: $post_info_border_bottom;
}

$post_content_padding: $BIG_PADDING $BIG_PADDING $ZERO_PADDING $BIG_PADDING !default;
$post_content_background: $ACCENT_COLOR !default;
.post-content {
  grid-area: post-content;
  padding: $post_content_padding;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: $post_content_background;
}

$post_reactions_min_height: 50px !default;
$post_reactions_padding: $SMALL_PADDING $BIG_PADDING !default;
$post_reactions_gap: $SMALL_PADDING !default;
$post_reactions_background: $MAIN_BG !default;
$post_reactions_border_top: 2px dotted gray !default;
.post-reactions {
  grid-area: post-reactions;
  min-height: $post_reactions_min_height;
  display: flex;
  padding: $post_reactions_padding;
  align-items: center;
  flex-wrap: wrap;
  gap: $post_reactions_gap;
  background-color: $post_reactions_background;
  border-top: $post_reactions_border_top;
}

$post_inner_padding_right: 25% !default;
$post_inner_padding_right_wider: 12.5% !default;
.post-inner {
  height: 100%;
  padding-right: $post_inner_padding_right;

  &.wider {
    padding-right: $post_inner_padding_right_wider;
  }
}

$signature_container_border_top: $post_reactions_border_top !default;
$signature_container_padding: $MEDIUM_PADDING $ZERO_PADDING !default;
.signature-container {
  border-top: $signature_container_border_top;
  padding: $signature_container_padding;
}

$code_background_color: $DARK_3 !default;
$code_font_color: white !default;
$code_border_radius: 8px !default;
$code_border_left: $MEDIUM_PADDING solid $LIGHT_2 !default;
pre code {
  display: block;
  background-color: $code_background_color;
  font-size: 1rem;
  color: $code_font_color;
  border-bottom-right-radius: $code_border_radius;
  border-bottom-left-radius: $code_border_radius;
  border-left: $code_border_left;
  padding: $BIG_PADDING;
  overflow: scroll;
  tab-size: 4;
}

$copy_code_header_background: $ACCENT_COLOR !default;
$copy_code_border: 2px solid black !default;
.copy-code-container {
  position: sticky;
  // width: 100%;
  width: calc(100% - 4px);
  display: flex;
  justify-content: space-between;
  align-items: last baseline;
  font-family: "Cadman";
  border-top-right-radius: $code_border_radius;
  border-top-left-radius: $code_border_radius;
  background-color: $copy_code_header_background;
  border-left: $copy_code_border;
  border-right: $copy_code_border;
  border-top: $copy_code_border;

  &::before {
    content: "code block";
    font-style: italic;
    margin-left: $MEDIUM_PADDING;
  }
}

.copy-code {
  margin-right: $MEDIUM_PADDING;
}

$inline_code_border_radius: $DEFAULT_BORDER_RADIUS !default;$inline_code_margin: 4px !default;
$inline_code_padding: $SMALL_PADDING $MEDIUM_PADDING !default;
.inline-code {
  background-color: $code_background_color;
  color: $code_font_color;
  padding: $inline_code_padding;
  display: inline-block;
  margin: $inline_code_margin;
  border-radius: $inline_code_border_radius;
  font-size: 1rem;
  white-space: pre;
}

$dialogs-padding: $ZERO_PADDING !default;
$dialogs-border-radius: $DEFAULT_BORDER_RADIUS !default;
$dialog_border: 2px solid black !default;
#delete-dialog, .lightbox-dialog {
  padding: $dialogs-padding;
  border-radius: $dialogs-border-radius;
  border: $dialog_border;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
}

$delete_dialog_padding: $BIG_PADDING !default;
.delete-dialog-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: $delete_dialog_padding;
}

$lightbox_background: $ACCENT_COLOR !default;
$lightbox_gap: $MEDIUM_PADDING !default;
$lightbox_inner_padding: $BIG_PADDING !default;
.lightbox-inner {
  display: flex;
  flex-direction: column;
  padding: $lightbox_inner_padding;
  min-width: 400px;
  background-color: $lightbox_background;
  gap: $lightbox_gap;
}

.lightbox-image {
  max-width: 70vw;
  max-height: 70vh;
  object-fit: scale-down;
}

.lightbox-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

$quote_padding: $MEDIUM_PADDING $BIG_PADDING !default;
$quote_margin: $MEDIUM_PADDING !default;
$quote_background_color: #00000026 !default;
$quote_border_radius: $DEFAULT_BORDER_RADIUS !default;
$quote_border_left: $MEDIUM_PADDING solid $LIGHT_2 !default;
blockquote {
  padding: $quote_padding;
  margin: $quote_margin;
  border-radius: $quote_border_radius;
  border-left: $quote_border_left;
  background-color: $quote_background_color;
}

$userpage_usercard_size: 300px !default;
$userpage_column_gap: $ZERO_PADDING !default;
.user-info {
  display: grid;
  grid-template-columns: $userpage_usercard_size 1fr;
  grid-template-rows: 1fr;
  gap: $userpage_column_gap;
  grid-template-areas:
    "user-page-usercard user-page-stats";
}

$user_page_usercard_padding: $BIG_PADDING $MEDIUM_PADDING !default;
$user_page_usercard_border: $usercard_border !default;
$user_page_usercard_background: $usercard_background !default;
$user_page_usercard_border_right: $usercard_border_right !default;
.user-page-usercard {
  grid-area: user-page-usercard;
  padding: $user_page_usercard_padding;
  border: $user_page_usercard_border;
  background-color: $DARK_1;
  border-right: $user_page_usercard_border_right;
}

$user_page_stats_padding: $BIG_PADDING $BIGGER_PADDING !default;
$user_page_stats_border: $DEFAULT_BORDER !default;
.user-page-stats {
  grid-area: user-page-stats;
  padding: $user_page_stats_padding;
  border: $user_page_stats_border;
}

$user_stats_list_margin: $ZERO_PADDING $ZERO_PADDING $MEDIUM_PADDING $ZERO_PADDING !default;
.user-stats-list {
  list-style: none;
  margin: $user_stats_list_margin;
}

$user_page_posts_border: $DEFAULT_BORDER !default;
$user_page_posts_background: $ACCENT_COLOR !default;
.user-page-posts {
  border-left: $user_page_posts_border;
  border-right: $user_page_posts_border;
  border-bottom: $user_page_posts_border;
  background-color: $user_page_posts_background;
}

$user_page_post_preview_max_height: 200px !default;
$user_page_post_preview_mask_image: linear-gradient(180deg,#000 60%,transparent) !default;
.user-page-post-preview {
  max-height: $user_page_post_preview_max_height;
  mask-image: $user_page_post_preview_mask_image;
}

$avatar_width: 90% !default;
$avatar_height: 90% !default;
$avatar_margin_bottom: $MEDIUM_PADDING !default;
.avatar {
  width: $avatar_width;
  height: $avatar_height;
  object-fit: contain;
  margin-bottom: $avatar_margin_bottom;
}

.username-link {
  overflow-wrap: anywhere;
}

.user-status {
  text-align: center;
}

button, input[type="submit"], .linkbutton {
  display: inline-block;
  @include button($BUTTON_COLOR, $DEFAULT_FONT_COLOR);
  
  &.critical {
    @include button($BUTTON_COLOR_CRITICAL, $BUTTON_CRITICAL_FONT_COLOR);
  }
  
  &.warn {
    @include button($BUTTON_COLOR_WARN, $BUTTON_WARN_FONT_COLOR);
  }
}

// not sure why this one has to be separate, but if it's included in the rule above everything breaks
input[type="file"]::file-selector-button {
  @include button($BUTTON_COLOR, $DEFAULT_FONT_COLOR);
  margin: $MEDIUM_PADDING;
}

$para_margin: $MEDIUM_BIG_PADDING $ZERO_PADDING !default;
p {
  margin: $para_margin;
}

$pagebutton_padding: $SMALL_PADDING $SMALL_PADDING !default;
$pagebutton_margin: $ZERO_PADDING !default;
$pagebutton_min_width: $BIG_PADDING !default;
.pagebutton {
  @include button($BUTTON_COLOR, $DEFAULT_FONT_COLOR);
  padding: $pagebutton_padding;
  margin: $pagebutton_margin;
  display: inline-block;
  min-width: $pagebutton_min_width;
  text-align: center;
}

.currentpage {
  @extend %button-base;
  border: none;
  padding: $pagebutton_padding;
  margin: $pagebutton_margin;
  display: inline-block;
  min-width: $pagebutton_min_width;
  text-align: center;
}

.modform {
  display: inline;
}

$login_container_width: $SETTINGS_WIDTH !default;
.login-container > * {
  width: $login_container_width;
  margin: auto;
}

$settings_container_width: $SETTINGS_WIDTH !default;
.settings-container > * {
  width: $settings_container_width;
  margin: auto;
}

$avatar_form_padding: $BIG_PADDING $ZERO_PADDING !default;
.avatar-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: $avatar_form_padding;
}

$text_input_border: $DEFAULT_BORDER !default;
$text_input_border_radius: $DEFAULT_BORDER_RADIUS !default;
$text_input_padding: 7px $MEDIUM_PADDING !default;
$text_input_background: color.scale($ACCENT_COLOR, $lightness: 40%) !default;
$text_input_background_focus: color.scale($ACCENT_COLOR, $lightness: 60%) !default;
input[type="text"], input[type="password"], textarea, select {
  border: $text_input_border;
  border-radius: $text_input_border_radius;
  padding: $text_input_padding;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  background-color: $text_input_background;
  
  &:focus {
    background-color: $text_input_background_focus;
  }
}

$infobox_info_color: #81a3e6 !default;
$infobox_critical_color: rgb(237, 129, 129) !default;
$infobox_warn_color: #fbfb8d !default;
$infobox_border: 2px solid black !default;
$infobox_padding: $BIG_PADDING $MEDIUM_BIG_PADDING !default;
.infobox {
  border: $infobox_border;
  background-color: $infobox_info_color;
  padding: $infobox_padding;
  
  &.critical {
    background-color: $infobox_critical_color;
  }
  
  &.warn {
    background-color: $infobox_warn_color;
  }
}

.infobox > span {
  display: flex;
  align-items: center;
}

$infobox_icon_min_width: 60px !default;
$infobox_icon_padding_right: $MEDIUM_BIG_PADDING !default;
.infobox-icon-container {
  min-width: $infobox_icon_min_width;
  padding-right: $infobox_icon_padding_right;
}

$thread_locked_icon_size: 96px !default;
$thread_column_gap: $ZERO_PADDING !default;
.thread {
  display: grid;
  grid-template-columns: $thread_locked_icon_size 1.6fr $thread_locked_icon_size;
  grid-template-rows: 1fr;
  gap: $thread_column_gap;
  grid-auto-flow: row;
  min-height: $thread_locked_icon_size;
  grid-template-areas:
    "thread-sticky-container thread-info-container thread-locked-container";
}

$thread_locked_border: 2px outset $LIGHT !default;
.thread-sticky-container {
  grid-area: thread-sticky-container;
  border: $thread_locked_border;
}

.thread-locked-container {
  grid-area: thread-locked-container;
  border: $thread_locked_border;
}

.contain-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  &:not(.full) > svg, &:not(.full) > img {
    height: 50%;
    width: 50%;
  }
  &.full > svg, &.full > img {
    height: 100%;
    width: 100%;
  }
}

$post_img_container_gap: $SMALL_PADDING !default;
.post-img-container {
  display: flex;
  flex-wrap: wrap;
  gap: $post_img_container_gap;
}

.post-image {
  object-fit: contain;
  max-width: 400px;
  max-height: 400px;
  min-width: 200px;
  min-height: 200px;
  flex: 1 1 0%;
  width: auto;
  height: auto;
}

$thread_info_background_color: $ACCENT_COLOR !default;
$thread_info_padding: $SMALL_PADDING $BIG_PADDING !default;
$thread_info_border: $DEFAULT_BORDER !default;
$thread_info_max_height: 110px !default;
$thread_info_mask_image: $user_page_post_preview_mask_image !default;
.thread-info-container {
  grid-area: thread-info-container;
  background-color: $thread_info_background_color;
  padding: $thread_info_padding;
  border-top: $thread_info_border;
  border-bottom: $thread_info_border;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: $thread_info_max_height;
  mask-image: $thread_info_mask_image;
}

$thread_info_post_preview_margin_right: $post_inner_padding_right !default;
.thread-info-post-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline;
  margin-right: $thread_info_post_preview_margin_right;
}

$babycode_guide_section_background: $ACCENT_COLOR !default;
$babycode_guide_section_padding: $SMALL_PADDING $BIG_PADDING !default;
$babycode_guide_section_border: $DEFAULT_BORDER !default;
$babycode_guide_section_padding_right: $post_inner_padding_right !default;
.babycode-guide-section {
  background-color: $babycode_guide_section_background;
  padding: $babycode_guide_section_padding;
  border: $babycode_guide_section_border;
  padding-right: $babycode_guide_section_padding_right;
}

$babycode_guide_toc_width: 300px !default;
$babycode_guide_column_guide: $ZERO_PADDING !default;
.babycode-guide-container {
  display: grid;
  grid-template-columns: 1.5fr $babycode_guide_toc_width;
  grid-template-rows: 1fr;
  gap: $babycode_guide_column_guide;
  grid-auto-flow: row;
  grid-template-areas:
    "guide-topics guide-toc";
}

.guide-topics {
  grid-area: guide-topics;
  overflow: hidden;
}

$babycode_guide_toc_padding: $MEDIUM_PADDING !default;
$babycode_guide_toc_background: $BUTTON_COLOR !default;
$babycode_guide_toc_border_radius: 8px !default;
$babycode_guide_toc_border: $DEFAULT_BORDER !default;
.guide-toc {
  grid-area: guide-toc;
  position: sticky;
  top: 100px;
  align-self: start;
  padding: $babycode_guide_toc_padding;
  border-bottom-right-radius: $babycode_guide_toc_border_radius;
  background-color: $babycode_guide_toc_background;
  border-right: $babycode_guide_toc_border;
  border-top: $babycode_guide_toc_border;
  border-bottom: $babycode_guide_toc_border;
}

.emoji-table tr td {
  text-align: center;
}

.emoji-table tr th {
  padding-left: 50px;
  padding-right: 50px;
}

.emoji-table {
  margin: auto;
}

$emoji_table_border: $DEFAULT_BORDER !default;
.emoji-table, th, td {
  border: $emoji_table_border;
  border-collapse: collapse;
}

$colorful_table_margin: $MEDIUM_PADDING $ZERO_PADDING !default;
.colorful-table {
  border-collapse: collapse;
  width: 100%;
  margin: $colorful_table_margin;
  overflow: hidden;
}

$colorful_table_th_color: $BUTTON_COLOR_2 !default;
$colorful_table_tr_padding: $SMALL_PADDING $ZERO_PADDING !default;
.colorful-table tr th {
  background-color: $colorful_table_th_color;
  padding: $colorful_table_tr_padding;
}

$colorful_table_td_color: $BUTTON_COLOR !default;
.colorful-table tr td {
  background-color: $BUTTON_COLOR;
  padding: $colorful_table_tr_padding;
  text-align: center;
}

$colorful_table_small_tr_width: 250px !default;
.colorful-table .small {
  width: $colorful_table_small_tr_width;
}

$topic_locked_icon_size: $thread_locked_icon_size !default;
$topic_column_gap: $ZERO_PADDING !default;
.topic {
  display: grid;
  grid-template-columns: 1.5fr $topic_locked_icon_size;
  grid-template-rows: 1fr;
  gap: $topic_column_gap;
  grid-auto-flow: row;
  grid-template-areas:
    "topic-info-container topic-locked-container";
}

$topic_info_background: $ACCENT_COLOR !default;
$topic_info_padding: $SMALL_PADDING $BIG_PADDING !default;
$topic_info_border: $DEFAULT_BORDER !default;
.topic-info-container {
  grid-area: topic-info-container;
  background-color: $topic_info_background;
  padding: $topic_info_padding;
  border: $topic_info_border;
  display: flex;
  flex-direction: column;
}

$topic_locked_border: $thread_locked_border !default;
.topic-locked-container {
  grid-area: topic-locked-container;
  border: $topic_locked_border;
}

$draggable_topic_background: $ACCENT_COLOR !default;
$draggable_topic_dragged_color: $BUTTON_COLOR !default;
$draggable_topic_padding: $BIG_PADDING !default;
$draggable_topic_margin: $MEDIUM_BIG_PADDING 0 !default;
$draggable_topic_border: 5px outset !default;
$draggable_topic_border_top: $draggable_topic_border $LIGHT !default;
$draggable_topic_border_bottom: $draggable_topic_border $DARK_2 !default;
.draggable-topic {
  cursor: pointer;
  user-select: none;
  background-color: $draggable_topic_background;
  padding: $draggable_topic_padding;
  margin: $draggable_topic_margin;
  border-top: $draggable_topic_border_top;
  border-bottom: $draggable_topic_border_bottom;
  
  &.dragged {
    background-color: $draggable_topic_dragged_color;
  }
}

$post_editing_header_color: $LIGHT !default;
.editing {
  background-color: $post_editing_header_color;
}

$post_editing_context_margin: $BIG_PADDING $ZERO_PADDING !default;
.context-explain {
  margin: $post_editing_context_margin;
  display: flex;
  justify-content: space-evenly;
}

.post-edit-form {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  height: 100%;
}

.babycode-editor {
  height: 150px;
  font-size: 1rem;
}

.babycode-editor-container {
  width: 100%;
}

.babycode-preview-errors-container {
  font-size: 0.8rem;
}

$tab_button_color: $BUTTON_COLOR !default;
$tab_button_active_color: $BUTTON_COLOR_2 !default;
$tab_button_font_color: $DEFAULT_FONT_COLOR !default;
.tab-button {
  @include button($tab_button_color, $tab_button_font_color);
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
  
  &.active {
    background-color: $tab_button_active_color;
    padding-top: 8px;
  }
}

$tab_content_background: color.adjust($BUTTON_COLOR_2, $saturation: -20%) !default;
$tab_content_border: $DEFAULT_BORDER !default;
$tab_content_padding: $MEDIUM_PADDING !default;
$tab_content_border_radius: $DEFAULT_BORDER_RADIUS !default;
.tab-content {
  display: none;
  
  &.active {
    min-height: 250px;
    display: block;
    background-color: $tab_content_background;
    border: $tab_content_border;
    padding: $tab_content_padding;
    border-top-right-radius: $tab_content_border_radius;
    border-bottom-right-radius: $tab_content_border_radius;
    border-bottom-left-radius: $tab_content_border_radius;
  }
}

$list_margin: $MEDIUM_PADDING $ZERO_PADDING $MEDIUM_PADDING $BIGGER_PADDING !default;
$list_padding: $ZERO_PADDING !default;
ul, ol {
  margin: $list_margin;
  padding: $list_padding;
}

.new-concept-notification.hidden {
  display: none;
}

$new_notification_offset: 80px !default;
$new_notification_border: $DEFAULT_BORDER !default;
$new_notification_border_radius: $DEFAULT_BORDER_RADIUS !default;
$new_notification_background: $infobox_info_color !default;
$new_notification_padding: $BIG_PADDING $MEDIUM_BIG_PADDING !default;
.new-concept-notification {
  position: fixed;
  bottom: $new_notification_offset;
  right: $new_notification_offset;
  border: $new_notification_border;
  background-color: $new_notification_background;
  padding: $new_notification_padding;
  border-radius: $new_notification_border_radius;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
}

.emoji {
  max-width: 15px; // these are not meant to be themed
  max-height: 15px;
}

$accordion_border_radius: $DEFAULT_BORDER_RADIUS !default;
$accordion_border: $DEFAULT_BORDER !default;
$accordion_margin: $MEDIUM_PADDING $SMALL_PADDING !default;
.accordion {
  border-top-right-radius: $accordion_border_radius;
  border-top-left-radius: $accordion_border_radius;
  box-sizing: border-box;
  border: $accordion_border;
  margin: $accordion_margin;
  overflow: hidden;
}

.accordion.hidden {
  border-bottom: none;
}

$accordion_header_background: $ACCORDION_COLOR !default;
$accordion_header_padding: $ZERO_PADDING $MEDIUM_PADDING !default;
$accordion_header_column_gap: $MEDIUM_PADDING !default;
$accordion_header_border_bottom: $DEFAULT_BORDER !default;
.accordion-header {
  display: flex;
  align-items: center;
  background-color: $accordion_header_background;
  padding: $accordion_header_padding;
  gap: $accordion_header_column_gap;
  border-bottom: $accordion_header_border_bottom;
}

$accordion_button_size: 36px !default;
.accordion-toggle {
  padding: 0;
  width: $accordion_button_size;
  height: $accordion_button_size;
  min-width: $accordion_button_size;
  min-height: $accordion_button_size;
}

.accordion-title {
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

$accordion_content_padding: $ZERO_PADDING $MEDIUM_BIG_PADDING !default;
.accordion-content {
  padding: $accordion_content_padding;
}

.accordion-content.hidden {
  display: none;
}

$post_accordion_content_padding_top: $MEDIUM_PADDING !default;
$post_accordion_content_padding_bottom: $MEDIUM_PADDING !default;
$post_accordion_content_background: $MAIN_BG !default;
.post-accordion-content {
  padding-top: $post_accordion_content_padding_top;
  padding-bottom: $post_accordion_content_padding_bottom;
  background-color: $MAIN_BG;
}

$inbox_padding: $MEDIUM_PADDING !default;
.inbox-container {
  padding: $inbox_padding;
}

$babycode_button_container_column_gap: $SMALL_PADDING !default;
.babycode-button-container {
  display: flex;
  gap: $babycode_button_container_column_gap;
  flex-wrap: wrap;
}

$babycode_button_padding: $SMALL_PADDING $MEDIUM_PADDING !default;
$babycode_button_min_width: $accordion_button_size !default;
.babycode-button {
  padding: $babycode_button_padding;
  min-width: $babycode_button_min_width;
  
  &> * {
    font-size: 1rem;
  }
}

$quote_fragment_background_color: #00000080 !default;
$quote_fragment_border_radius: $DEFAULT_BORDER_RADIUS !default;
$quote_fragment_padding: $SMALL_PADDING $MEDIUM_PADDING !default;
.quote-popover {
  position: absolute;
  transform: translateX(-50%);
  margin: 0;
  border: none;
  border-radius: $quote_fragment_border_radius;
  background-color: $quote_fragment_background_color;
  padding: $SMALL_PADDING $MEDIUM_PADDING;
}

$footer_border_top: $DEFAULT_BORDER !default;
footer {
  border-top: $footer_border_top;
}

$reaction_button_active_color: $BUTTON_COLOR_2 !default;
$reaction_button_active_font_color: $DEFAULT_FONT_COLOR !default;
.reaction-button.active {
  @include button($reaction_button_active_color, $reaction_button_active_font_color);
}

$reaction_popover_border_radius: $DEFAULT_BORDER_RADIUS !default;
$reaction_popover_background: $quote_fragment_background_color !default;
$reaction_popover_padding: $SMALL_PADDING $MEDIUM_PADDING !default;
.reaction-popover {
  position: relative;
  margin: 0;
  border: none;
  border-radius: $reaction_popover_border_radius;
  background-color: $reaction_popover_background;
  padding: $reaction_popover_padding;
  width: 250px;
}

.reaction-popover-inner {
  display: flex;
  flex-wrap: wrap;
  overflow: scroll;
  margin: auto;
  justify-content: center;
}

$babycode_guide_list_border: 1px dashed !default;
.babycode-guide-list {
  border-bottom: $babycode_guide_list_border;
}