@use "yotsuba-contract" as *;

/* Page layout */

body {
  background: $bg;
  color: $text;
  font-family: $font;
}

header {
  border-bottom: 1px solid $box-border;
  background-color: $box-bg;
  color: $link-list;
}

/* Images */

.banner {
  border: 1px solid $box-border;
}

/* Tables */

.form-table th,
.data-table th {
  border: 1px solid $table-border;
  background-color: $table-head;
}

.data-table {
  background-color: $table-bg;
}

.data-table td {
  border: 1px solid $table-border;
}

/* Components */

.title {
  color: $title;
  font-family: $title-font;
}

.infobox {
  border: 1px solid $table-border;
  background-color: $table-bg;
}

.infobox-head {
  background-color: $table-head;
}

.pagination {
  color: $link-list;
}

/* Post */

.subject {
  color: $subject;
}

.name {
  color: $name;
}

.tripcode {
  color: $trip;
}

.user-id {
  border: 1px solid $box-border;
}

.thumb-video {
  border: 2px solid $video-border;
}

.thumb-audio {
  border: 2px solid $audio-border;
}

.thumb-application {
  border: 2px solid $application-border;
}

/* Post formatting */

.post-content a {
  color: $post-link;
}

.post-content a:hover {
  color: $post-link-hover;
}

.spoiler {
  background-color: $text;
  color: $text;
}

.spoiler:hover {
  background-color: transparent;
}

.dead-link {
  color: $dead-link;
}

.green {
  color: $greentext;
}

.orange {
  color: $orangetext;
}

.red {
  color: $redtext;
}

.chosen {
  background-color: $chosen-bg;
  color: $chosen-text;
}

.embedded {
  border: 1px solid $embedded-border;
  background-color: $embedded-bg;
  color: $embedded;
}

/* General styling */

a {
  color: $link;
}

a:hover {
  color: $link-hover;
}

hr {
  border: none;
  border-top: 1px solid $hr;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="file"],
button,
textarea,
select,
.input-wrapper {
  border: 1px solid $input-border;
  background-color: $input-bg;
  color: $input;
}

/* Box */

.form-table,
.pagination,
.inner-footer,
.reply,
.catalog-tile,
.form-group {
  border-right: 1px solid $box-border;
  border-bottom: 1px solid $box-border;
  background-color: $box-bg;
}

.post.highlighted,
.post:target {
  border-right: 1px solid $hl-box-border;
  border-bottom: 1px solid $hl-box-border;
  background-color: $hl-box-bg;
}

/* Actions */

.form-group .form-table {
  border: none;
  background: none;
}