@charset "utf-8";

@import "./reset.scss";

// Import and Set Fonts
@import url("https://fonts.googleapis.com/css?family=Kanit:300|Prompt:400,600&display=swap");

$family-primary: "Kanit", BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto",
  "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
  "Helvetica", "Arial", sans-serif;

$family-secondary: "Prompt", BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto",
  "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
  "Helvetica", "Arial", sans-serif;

$title-family: $family-secondary;

$weight-normal: 400;
$weight-semibold: 600;
$weight-bold: 800;

$body-weight: $weight-normal;

// Colors
$turquoise: #00c1a5;
$primary: $turquoise;

$link: $primary;
$info: #209cee;
$success: #23d160;
$warning: #ffdd57;
$danger: #ff3860;
$dark: #293347;
$grey-dark: #34495e;
$primary-dark: #1e392a;

$body-background-color: #f5f5f5;
$text: $dark;
$body-color: $text;
$title-color: $text;
$subtitle-color: $text;
$subtitle-strong-color: $text;
$link-hover: $primary-dark;

//Layout
$section-padding: 3.5rem 1.25rem;

//Elements
$box-shadow: 0 6px 14px 0 rgba(24, 32, 41, 0.06), 0 12px 34px 0 rgba(24, 32, 41, 0.04);

$card-shadow: 0 0 1px rgba(58, 55, 148, 0.25), 0 6px 14px 0 rgba(24, 32, 41, 0.06),
  0 12px 34px 0 rgba(24, 32, 41, 0.04);

$dropdown-content-shadow: 0 0 1px rgba(58, 55, 148, 0.25),
  0 6px 14px 0 rgba(24, 32, 41, 0.06), 0 12px 34px 0 rgba(24, 32, 41, 0.04);

$button-focus-border-color: $primary;

//Components
$navbar-dropdown-arrow: $primary;
$menu-label-spacing: 2em;
$pagination-focus-border-color: $primary;

@import "bulma/bulma.sass";

// Assign sass variables to css
.factor-app {
  --weight-normal: #{$weight-normal};
  --weight-semibold: #{$weight-semibold};
  --weight-bold: #{$weight-bold};

  --family-secondary: #{$family-secondary};

  --primary: #{$primary};
  --info: #{$info};
  --dark: #{$dark};

  --section-padding: #{$section-padding};

  --color-primary: #0496ff;
  --color-primary-rgb: 42, 116, 229;
  --color-secondary: #ff0076;
  --color-tertiary: #eff6ff;
  --color-text: #506677;
  --color-light: #fafbff;
  --color-placeholder: #bdcad4;

  --color-success: #42b983;
  --color-info: #62bdff;
  --color-warning: #ff6464;
  --color-danger: #ff0076;
  --color-code: #e83b0e;

  --color-bg: #ffffff;
  --color-bg-alt: #f6f9fc;
  --color-bg-dark: var(--color-text);

  --font-family-primary: -apple-system,
    /* Chrome < 56 for OS X (San Francisco)  */ BlinkMacSystemFont,
    /* Windows  */ "Segoe UI", /* Android  */ "Roboto",
    /* Basic web fallback  */ "Helvetica Neue", Arial, sans-serif;

  --box-shadow-panel: 0 0 1px rgba(58, 55, 148, 0.25), 0 6px 14px 0 rgba(24, 32, 41, 0.06),
    0 12px 34px 0 rgba(24, 32, 41, 0.04);

  --box-shadow-input: 0 0 0 1px rgba(0, 43, 93, 0.2);
}

//The following css are modifications for the theme
.title {
  font-family: var(--family-secondary);
}

.is-sticky {
  position: sticky;
  height: 100vh;
  overflow-y: scroll;

  &.is-sticky-top {
    top: 0;
  }
}

.button {
  font-weight: bold;
  font-family: var(--family-secondary);
}

.card,
.box {
  &.is-fullheight {
    height: 100%;
  }
}

.box {
  padding: 1.5rem;

  .media-content {
    padding-left: 1em;
  }
}

@media screen and (max-width: 768px) {
  .media-content {
    overflow-x: unset;
  }
}

.align-self-stretch {
  align-self: stretch;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-4 {
  margin-bottom: 2rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.ml-2 {
  margin-left: 0.5rem !important;
}