// General imports, for styles that apply to all pages
// scss-lint:disable QualifyingElement

@import "fonts";
@import "mixins";
@import "uikit_shim";
@import "variables";

/*
  Page-specific styling imports

  You can target pages in the following ways:

  * For specific pages, take the view name, prefix it with
    "page-" and replace all the dots with dashes. This will
    give you a class that only matches that page.
  * For all pages under a specific blueprint, take the blueprint
    name, prefix it with "blueprint-" and replace all the dots with
    dashes. This will give you a class that matches every page
    under that blueprint.

  For example:
    "main.index.jams" -> ".page-main-index-jams"
    "wiki" -> ".blueprint-wiki"

  Additionally, you can use your own class names for categories of pages.
  For example, you might provide a "uses-rst" class, which you would then
  make use of in your templates by putting it in a "page_classes" block.

  For example:
    {% block page_classes %}uses-rst{% endblock %}

  If you do this, make sure you document it on the wiki!
*/


// Styles useful across all pages
@import "pages/rst";

// Sectional: Errors Blueprint
@import "pages/errors/common";

// Sectional: Main Blueprint
@import "pages/main/index";

@import "pages/main/about/partners";
@import "pages/main/about/privacy";

@import "pages/main/info/resources";

@import "pages/main/jams/index";
@import "pages/main/jams/join";
@import "pages/main/jams/team_view";
@import "pages/main/jams/team_list";

// Sectional: Staff Blueprint
@import "pages/staff/common";

@import "pages/staff/jams/edit_ending";
@import "pages/staff/jams/edit_info";

@import "pages/staff/jams/forms/preamble_edit";
@import "pages/staff/jams/forms/questions_view";
@import "pages/staff/jams/forms/view";

@import "pages/staff/jams/infractions/view";

@import "pages/staff/tables/edit";
@import "pages/staff/tables/table";

// Sectional: Wiki Blueprint
@import "pages/wiki/common";

/*
  Custom styling using our own classes and IDs. If instead you're
  modifying existing UIKit styles to better suit our site, you should
  put it in the UIKit shim file instead.
*/

html {
  height: 100%;

  body {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}

.navbar-logo {
  height: 60%;
  margin-left: -10px;
  margin-top: 2px;
  max-width: 110%;
  padding-left: 3px;
}

.hover-title a {
  @include transition(opacity, 200ms, ease-in-out);

  opacity: 0;
  visibility: hidden;
}

.hover-title:hover a {
  @include transition(opacity, 200ms, ease-in-out);

  opacity: 1;
  visibility: visible;
}

.debug-mode-item {
  color: $primary_background !important;
}

.jam-image {
  max-width: 15rem;
}

.cursor-default {
  cursor: default !important;
}

.full-width {
  width: 100%;
}

// Forms

select {
  -webkit-appearance: unset !important;

  left: auto !important;
  opacity: 1 !important;
  position: relative !important;
  top: auto !important;
}

div.danger-input * {
  border-color: $red !important;
  color: $red;

  transition: color .5s ease,
              border-color .5s ease;
}

// Tables

table.table-bordered {
  border: 1px solid $global_border !important;
}

tr.thick-bottom-border {
  border-bottom: 3px solid $global_border !important;
}

td.left-border,
th.left-border {
  border-left: 1px solid $global_border !important;
}

td.right-border,
th.right-border {
  border-right: 1px solid $global_border !important;
}

// Flash of Unstyled Content fixes

.prevent-fouc {
  display: none;
}