@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700,900);

$dark-text-default: rgb(34, 34, 34);
$light-text-default: rgb(255,255,255);

@function brightness($color) {
  @if type-of($color) == color {
    @return (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) / 255 * 100%;
  }
  @else { @return unquote("brightness(#{$color})"); }
}

@function color-contrast($color, $dark: $dark-text-default, $light: $light-text-default) {
  @if $color == null { @return null; }
  @else {
    $color-brightness: brightness($color);
    $light-text-brightness: brightness($light);
    $dark-text-brightness: brightness($dark);
    @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
  }
}

@import 'default-variables';
@import '../../../../content/sass/_custom-variables';
@import 'preview-variables';

// Placeholder text color
$placeholder-text-color: lighten($header-bg-color, 20%);
@if (lightness($header-bg-color) > 50) { $placeholder-text-color: darken($header-bg-color, 20%); }

// Spacing Calculated
$base-grid-padding: 2rem;

// Primary Layout Colors Calculated
$color-primary-alt: lighten($color-primary, 30%);
@if (lightness($color-primary) > 50) { $color-primary-alt: darken($color-primary, 15%); }
// transparent version
$color-primary-transparent: rgba($color-primary, 0.4);

// Fonts Calculated
$button-text-color: color-contrast($color-primary);
$secondary-font-color-dark: lighten($secondary-font-color, 15%);
$secondary-font-color-light: darken($secondary-font-color, 20%);
@if (lightness($base-background-color) > 50) {
  $secondary-font-color-dark: darken($secondary-font-color, 15%);
  $secondary-font-color-light: lighten($secondary-font-color, 20%);
}

// Components Calculated
$color-highlighted: HSL(200, 20%, 25%);
$border-color-alt: darken($border-color, 30%);
$code-block-bg-color: lighten($base-background-color, 10%);
@if (lightness($base-background-color) > 50) {
  $border-color-alt: lighten($border-color, 10%);
  $code-block-bg-color: darken($base-background-color, 10%);
  $color-highlighted: HSL(60, 100%, 95%);
}
$code-block-text-color: color-contrast($code-block-bg-color);

//Header Colors Calculated
$header-height: 3.125rem;
$header-bottom-margin: 1.5rem;
$header-logo-font-size: 1.3rem;
$header-logo-font-color: $header-font-color;
$header-login-font-size: 0.815rem;
$header-login-font-color: $header-logo-font-color;
$header-dropdown-bg-color: darken(rgba($header-bg-color, 0.98), 8%);
$header-dropdown-shadow-color: rgba(0, 0, 0, 0.3);

//Sub header color
$sub-header-font-color: color-contrast($sub-header-color);
$sub-header-secondary-font-color: darken($sub-header-font-color, 10%);

// Breadcrumbs Calculated
$breadcrumbs-height: 2.8125rem;
$breadcrumbs-font-size: $header-login-font-size;
$breadcrumbs-bg-color: $sub-header-color;
$breadcrumbs-link-color: color-contrast($breadcrumbs-bg-color);
$breadcrumbs-dead-link-color: $secondary-font-color;
$breadcrumbs-border-color: darken($breadcrumbs-bg-color, 8%);
$breadcrumbs-shadow-color: rgba(0, 0, 0, 0.1);
$breadcrumbs-bottom-margin: 1rem;

// Footer Calculated
$footer-font-color: $secondary-font-color;
$footer-bg-color: $sub-header-color;
$footer-link-color: $footer-font-color;
$footer-link-hover-color: $color-primary;
