//
// EdGEL-specific Variables
// --------------------------------------------------
//

@use "colours";

$grid-gutter-height:        1.5rem;
$main-content-spacer:       1.5rem;
$base-page-char-width:      85;

$page-content-bg:           #f5f5f5;
$page-heading-border-color: colours.$gray-200;
$footer-discover-fg:        colours.$gray-500;
$footer-discover-bg:        colours.$gray-900;
$footer-fg:                 colours.$gray-400;
$footer-bg:                 colours.$gray-800;
$footer-hover:              colours.$white;
$footer-panel-dark:         colours.$gray-600;
$footer-panel-light:        colours.$white;

// Contact settings
$contact-list-line-height:  1.75;

// Hero panel settings
$hero-padding:              3rem;
$hero-dark-link:            colours.$gray-400;

// Feature panels (Most settings in edgel-dark-bg mixin).
$feature-bg:                colours.$dark;
$feature-fg:                colours.$white;

// Page masthead settings
$masthead-padding:     1.25rem;
$masthead-padding-xs:  .3125rem;

// Navbar
$navbar-dark-active-bg: colours.$white;
$navbar-nav-item-border: 1px solid rgba(colours.$black, .3);
$navbar-light-toggler-hover-bg: rgba(colours.$black, .15);
$navbar-dark-toggler-hover-bg: rgba(colours.$white, .3);

// Icon cards
$card-icon-panel-width: 3rem;
$card-icon-size: 1rem;

// Gallery
$gallery-indicator-height: 5.5rem;
$gallery-image-height: 37.5rem;

// Disabled buttons - all same colour to ensure contrast
$btn-disabled-background: colours.$gray-400;

$zindex-focus: 5;
$focus-outline-width: 2px;

$link-font-weight: 700;
$link-decoration-opacity: .55;
$link-decoration-hover-opacity: 1;
$link-decoration-thickness: .0625em;
$link-decoration-hover-thickness: (2 * $link-decoration-thickness);
$link-decoration-skip-ink: none;
$link-underline-offset: .2em;