////
/// General theme configuration.
/// @group Configuration
////

/// Configuration for Drupal Admin tabs.
$drupal-tabs: (
  wrap: (
    background: #fafafa,
    border: #efefef,
  ),
  link: (
    color: #251923,
    background: #efefef,
    hover-color: #ffffff,
    hover-background: #251923,
  ),
  alt-colors: #b6c4c5 #575642 #4c4650 #251923,
);

/// z-index organization.
/// See links below for more information.
///
/// @link https://css-tricks.com/handling-z-index/
/// @link http://www.sitepoint.com/using-sass-maps/
$z-layers: (
  skip-link: 8000,
  ajax-throbber: 7000,
  debug: 1000,
  above: 1,
  default: 0,
  under: -1,
  bottomless-pit: -9999,
  dropdown: 800,
  popup: 900,
  menu: (
    block: 850,
    icon: 851,
  ),
  splash: 901,
);

/// Button config
$buttons: (
  _base: (
    background: $color-primary-600,
    color: $color-white,
    hover-background: $color-primary-700,
    hover-color: $color-white,
    active-background: $color-primary-400,
    active-color: $color-gray-900,
  ),
  primary: (
    extend: _base,
  ),
);

/// Animations variables
$global-transition-duration: 0.15s;
$global-transition-timing-function: ease;

/// Links config
$links: (
  default: (
    color: $color-primary-400,
    font-weight: $global-weight-normal,
    hover-color: $color-primary-600,
    active-color: $color-primary-600,
  ),
  secondary: (
    color: $color-primary-600,
    font-weight: $global-weight-medium,
    hover-color: $color-primary-600,
    active-color: $color-primary-600,
  ),
  more: (
    color: $color-primary-600,
    font-weight: $global-weight-medium,
    hover-color: $color-primary-600,
    active-color: $color-gray-900,
  ),
  more-big: (
    color: $color-primary-600,
    font-weight: $global-weight-bold,
    hover-color: $color-primary-600,
    active-color: $color-gray-900,
  ),
  back: (
    color: $color-primary-600,
    font-weight: $global-weight-medium,
    hover-color: $color-primary-600,
    active-color: $color-gray-900,
  ),
  external: (
    color: $color-primary-600,
    font-weight: $global-weight-medium,
    hover-color: $color-primary-600,
    active-color: $color-primary-600,
  ),
);

/// Labels config
$labels: (
  default: (
    color: $color-gray-900,
    border-color: $color-primary-600,
    background-color: $color-gray-100,
    active-color: $color-gray-900,
    active-border-color: $color-primary-600,
    active-background-color: $color-gray-300,
  ),
  default-active: (
    color: $color-white,
    border-color: $color-primary-600,
    background-color: $color-primary-600,
    active-color: $color-gray-900,
    active-border-color: $color-primary-400,
    active-background-color: $color-primary-400,
  ),
);

/// Layouts
$layouts: (
  _base: (
    width: $global-width,
    gutters: $grid-column-gutter,
  ),
  default: (
    extend: _base,
  ),
);

/// Hr styles
$hr-styles: (
  green: $color-linear-horizontal-green,
  purple: $color-linear-horizontal-purple,
  blue: $color-linear-horizontal-blue,
);

/// Brand shapes
$shapes: (
  banner: (
    width: 820px,
    height: 590px,
    path: polygon(12% 0, 87% 4%, 100% 61%, 79% 100%, 17% 95%, 0 42%),
  ),
  banner-frame: (
    width: 803px,
    height: 653px,
    color: $color-linear-horizontal,
    path:
      polygon(
        evenodd,
        15% 16%,
        74% 0,
        99% 28%,
        100% 79%,
        36% 100%,
        0 62%,
        calc(0% + 4.5px) calc(62% - 1px),
        calc(15% + 3px) calc(16% + 4px),
        calc(74% - 2px) calc(0% + 4px),
        calc(99% - 4px) calc(28% + 1px),
        calc(100% - 4px) calc(79% - 4px),
        calc(36% + 1px) calc(100% - 4px),
        calc(0% + 4.5px) calc(62% - 1px),
        0 62%
      ),
  ),
  home-banner: (
    width: 920px,
    height: 816px,
    path: polygon(13% 3%, 89% 0, 100% 41%, 84% 95%, 21% 100%, 0 61%),
  ),
  home-banner-frame: (
    width: 919px,
    height: 883px,
    color: $color-linear-horizontal,
    path:
    polygon(
        evenodd,
        25% 0%,
        76% 0,
        100% 61%,
        67% 100%,
        7% 91%,
        0% 40%,
        calc(0% + 5.5px) calc(40% + 4px),
        calc(25% + 2px) calc(0% + 4px),
        calc(76% - 3px) calc(0% + 5px),
        calc(100% - 5px) 61%,
        calc(67% - 2px) calc(100% - 5px),
        calc(7% + 5px) calc(91% - 4px),
        calc(0% + 5.5px) calc(40% + 4px),
        0% 40%
      ),
  ),
  footer: (
    width: 1100px,
    height: 431px,
    color: $color-gray-100,
    path: polygon(29% 0, 91% 14%, 100% 60%, 90% 97%, 17% 100%, 0 48%, 9% 28%),
  ),
  footer-frame: (
    width: 1005px,
    height: 354px,
    color: $color-linear-horizontal,
    path:
      polygon(
        evenodd,
        15% 5%,
        74% 0%,
        100% 72%,
        86% 100%,
        9% 99%,
        0% 32%,
        calc(0% + 5px) calc(32% + 2px),
        calc(15% + 2px) calc(5% + 4px),
        calc(74% - 2px) calc(0% + 4px),
        calc(100% - 5px) 72%,
        calc(86% - 2px) calc(100% - 6px),
        calc(9% + 3px) calc(99% - 4px),
        calc(0% + 5px) calc(32% + 2px),
        0% 32%
      ),
  ),
  text: (
    width: 867px,
    height: 507px,
    color: $color-gray-100,
    path: polygon(18% 0, 94% 7%, 100% 36%, 94% 91%, 16% 100%, 0 58%),
  ),
  text-frame: (
    width: 832px,
    height: 560px,
    color: $color-linear-horizontal,
    path:
      polygon(
        evenodd,
        91% 0%,
        99% 43%,
        86% 94%,
        41% 100%,
        0% 78%,
        20% 12%,
        calc(20% + 4px) calc(12% + 3px),
        calc(91% - 3px) calc(0% + 5px),
        calc(99% - 4.5px) 43%,
        calc(86% - 3.5px) calc(94% - 4px),
        calc(41% + 1px) calc(100% - 4.5px),
        calc(0% + 6px) calc(78% - 3px),
        calc(20% + 4px) calc(12% + 3px),
        20% 12%,
      ),
  ),
  text-inverse: (
    width: 867px,
    height: 507px,
    color: $color-gray-100,
    path: polygon(6% 6%, 82% 0, 100% 58%, 84% 100%, 6% 91%, 0 36%),
  ),
  text-inverse-frame: (
    width: 832px,
    height: 560px,
    color: $color-linear-horizontal-inverse,
    path:
      polygon(
        evenodd,
        80% 12%,
        99% 78%,
        58% 100%,
        14% 94%,
        0% 43%,
        9% 1%,
        calc(9% + 4px) calc(1% + 5px),
        calc(80% - 3px) calc(12% + 4.5px),
        calc(99% - 6px) calc(78% - 3px),
        calc(58% - 2px) calc(100% - 5px),
        calc(14% + 3px) calc(94% - 4.5px),
        calc(0% + 5px) 43%,
        calc(9% + 4px) calc(1% + 5px),
        9% 1%,
      ),
  ),
  text-with-media: (
    path: polygon(11% 0, 87% 4%, 100% 61%, 79% 100%, 16% 95%, 0 42%),
  ),
  text-with-media-frame: (
    color: $color-linear-horizontal,
    path:
    polygon(
        evenodd,
        72% 0,
        96% 28%,
        97% 79%,
        35% 100%,
        1% 62%,
        15% 16%,
        calc(15% + 4px) calc(16% + 2px),
        calc(72% - 1px) calc(0% + 5px),
        calc(96% - 4px) calc(28% + 2px),
        calc(97% - 4px) calc(79% - 3px),
        calc(35% + 1.5px) calc(100% - 4.5px),
        calc(1% + 5px) calc(62% - 1.5px),
        calc(15% + 4px) calc(16% + 2px),
        15% 16%,
      ),
  ),
  text-with-media-inverse: (
    path: polygon(13% 4%, 88% 0, 100% 42%, 83% 95%, 21% 100%, 0 61%),
  ),
  text-with-media-inverse-frame: (
    color: $color-linear-horizontal-inverse,
    path:
      polygon(
        evenodd,
        28% 0,
        85% 15%,
        100% 62%,
        64% 100%,
        3% 79%,
        4% 28%,
        calc(4% + 4.5px) calc(28% + 2px),
        calc(28% + 1px) calc(0% + 5px),
        calc(85% - 3px) calc(15% + 4px),
        calc(100% - 5px) calc(62% - 1px),
        calc(64% - 1px) calc(100% - 5px),
        calc(3% + 4.5px) calc(79% - 4px),
        calc(4% + 4.5px) calc(28% + 2px),
        4% 28%,
      ),
  ),
  categories: (
    width: 842px,
    height: 579px,
    color: $color-gray-100,
    path: polygon(94% 7%, 100% 42%, 89% 93%, 16% 100%, 0 58%, 11% 0),
  ),
  categories-frame: (
    width: 801px,
    height: 638px,
    color: $color-linear-horizontal,
    path: polygon(
        evenodd,
        91% 0,
        99% 42%,
        86% 94%,
        41% 100%,
        1% 78%,
        19% 1%,
        calc(19% + 4.5px) calc(1% + 4px),
        calc(91% - 3.5px) calc(0% + 5px),
        calc(99% - 5px) 42%,
        calc(86% - 4.5px) calc(94% - 4px),
        calc(41% + 1px) calc(100% - 5px),
        calc(1% + 6px) calc(78% - 3px),
        calc(19% + 4.5px) calc(1% + 4px),
        19% 1%,
      ),
  ),
  featured-event: (
    width: 100%,
    height: 100%,
    color: $color-gray-100,
    path: polygon(10% 0, 87% 0, 100% 42%, 92% 100%, 10% 99%, 0 38%),
  ),
  featured-event-frame: (
    color: $color-linear-horizontal,
    path: polygon(
        evenodd,
        9% 0,
        98% 16%,
        100% 59%,
        86% 100%,
        19% 93%,
        0% 26%,
        calc(0% + 5px) 26%,
        calc(9% + 2px) calc(0% + 5px),
        calc(98% - 4px) calc(16% + 4px),
        calc(100% - 5px) calc(59% - 1px),
        calc(86% - 2px) calc(100% - 5px),
        calc(19% + 3px) calc(93% - 4px),
        calc(0% + 5px) 26%,
        0% 26%,
      ),
  ),
);

$animations-easing: cubic-bezier(0.45, 0, 0.55, 1);
$animations-translate-position: 35px;

/// Animations
$animations: (
  '.field-banner.animation-in': (
    '.field--name-field-image': (
      shapeShake 10s linear infinite,
    ),
    '.frame::before': (
      shapeFrameBackgroundRotate 5s linear infinite,
    ),
  ),
  '.block--home-banner.animation-in': (
    '.heading': blockTitle 1s $animations-easing both,
    '.field--name-field-description': blockFadeIn 1s .15s $animations-easing both,
    '.field--name-field-p-link .field__item:nth-child(1)': blockFadeIn 1s .25s $animations-easing both,
    '.field--name-field-p-link .field__item:nth-child(2)': blockFadeIn 1s .35s $animations-easing both,
    '.field--name-field-media': (
      shapeShake 10s linear infinite,
    ),
    '.frame::before': (
      shapeFrameBackgroundRotate 5s linear infinite,
    ),
  ),
  '.block--home-banner.animation-out': (
    '.frame': blockSlideOut 1s $animations-easing both,
  ),
  '.block--basic-banner.animation-in': (
    '.heading': blockTitle 1s $animations-easing both,
    '.field--name-field-description': blockFadeIn 1s .1s $animations-easing both,
    '.field--name-field-p-link .field__item:nth-child(1)': blockFadeIn 1s .2s $animations-easing both,
    '.field--name-field-p-link .field__item:nth-child(2)': blockFadeIn 1s .3s $animations-easing both,
    '.field--name-field-media': (
      shapeShake 10s linear infinite,
    ),
    '.frame::before': (
      shapeFrameBackgroundRotate 5s linear infinite,
    ),
  ),
  '.block--basic-banner.animation-out': (
    '.frame': blockSlideOut 1s $animations-easing both,
  ),
  '.block--simple-banner.animation-in': (
    '.heading': blockTitle 1s $animations-easing both,
  ),
  '.block--text.animation-in': (
    '&::before': (
      blockSlideIn 1s $animations-easing both,
      shapeRotate 4s $animations-easing infinite alternate,
    ),
    '.frame': (
      shapeFrameRotate 4s $animations-easing infinite alternate-reverse,
    ),
    '.frame::before': (
      shapeFrameBackgroundRotate 5s linear infinite,
    ),
    '.heading': blockTitle 1s .5s $animations-easing both,
    '.field--name-field-description': blockFadeIn 1s .6s $animations-easing both,
    '.field--name-field-p-link .field__item:nth-child(1)': blockFadeIn 1s .8s $animations-easing both,
    '.field--name-field-p-link .field__item:nth-child(2)': blockFadeIn 1s .9s $animations-easing both,
  ),
  '.block--text-with-media.animation-in': (
    '.field--name-field-media img': blockSlideIn 1s $animations-easing both,
    '.heading': blockTitle 1s .5s $animations-easing both,
    '.field--name-field-description': blockFadeIn 1s .6s $animations-easing both,
    '.field--name-field-p-link .field__item:nth-child(1)': blockFadeIn 1s .8s $animations-easing both,
    '.field--name-field-p-link .field__item:nth-child(2)': blockFadeIn 1s .9s $animations-easing both,
    '.frame::before': (
      shapeFrameBackgroundRotate 5s linear infinite,
    ),
  ),
  '.block--text-with-media.animation-out': (
    '.field--name-field-media img': blockSlideOut 1s $animations-easing both,
  ),
  '.block--links.animation-in': (
    '.heading': blockTitle 1s $animations-easing both,
    '.field--name-field-links': blockFadeIn 1s .2s $animations-easing both,
  ),
  '.block--community-features.animation-in': (
    '&': blockFadeIn 1s .2s $animations-easing both,
  ),
  '.block--partners.animation-in': (
    '.views-row:nth-child(1)': blockFadeIn .5s $animations-easing both,
    '.views-row:nth-child(2)': blockFadeIn .5s .15s $animations-easing both,
    '.views-row:nth-child(3)': blockFadeIn .5s .3s $animations-easing both,
    '.views-row:nth-child(4)': blockFadeIn .5s .45s $animations-easing both,
    '.views-row:nth-child(5)': blockFadeIn .5s .6s $animations-easing both,
    '.views-row:nth-child(6)': blockFadeIn .5s .75s $animations-easing both,
    '.views-row:nth-child(7)': blockFadeIn .5s .9s $animations-easing both,
    '.heading': blockTitle 1s .1s $animations-easing both,
    '.block-content .field--name-field-description': blockFadeIn 1s .2s $animations-easing both,
    '.block-content .field--name-field-p-link .field__item:nth-child(1)': blockFadeIn 1s .3s $animations-easing both,
    '.block-content .field--name-field-p-link .field__item:nth-child(2)': blockFadeIn 1s .4s $animations-easing both,
  ),
  '.block--views-blockevents-events.animation-in': (
    '.view-events-events > .view-content::before': blockFadeIn 1s $animations-easing both,
    '.view-events-events > .view-content > .views-row:nth-child(1)': blockFadeIn 1s .2s $animations-easing both,
    '.view-events-events > .view-content > .views-row:nth-child(2)': blockFadeIn 1s .25s $animations-easing both,
    '.view-events-events > .view-content > .views-row:nth-child(3)': blockFadeIn 1s .3s $animations-easing both,
    '.node--view-mode-featured-teaser .node__content::before': (
      blockSlideIn 1s $animations-easing both,
      shapeRotate 4s $animations-easing infinite alternate,
    ),
    '.node--view-mode-featured-teaser .node__content .frame': (
      shapeFrameRotate 4s $animations-easing infinite alternate-reverse,
    ),
    '.node--view-mode-featured-teaser .node__content .frame::before': (
      shapeFrameBackgroundRotate 5s linear infinite,
    ),
    '.node--view-mode-featured-teaser .date-wrapper': blockFadeIn 1s .2s $animations-easing both,
    '.node--view-mode-featured-teaser .field-content': blockFadeIn 1s .3s $animations-easing both,
  ),
  '.block--views-blockcases-listing.animation-in': (
    '.view-filters': blockFadeIn 1s $animations-easing both,
    '.views-row:nth-child(1)': blockFadeIn .5s $animations-easing both,
    '.views-row:nth-child(2)': blockFadeIn .5s .1s $animations-easing both,
    '.views-row:nth-child(3)': blockFadeIn .5s .2s $animations-easing both,
    '.views-row:nth-child(4)': blockFadeIn .5s .3s $animations-easing both,
    '.views-row:nth-child(5)': blockFadeIn .5s .4s $animations-easing both,
    '.views-row:nth-child(6)': blockFadeIn .5s .5s $animations-easing both,
    '.views-row:nth-child(7)': blockFadeIn .5s .6s $animations-easing both,
    '.views-row:nth-child(8)': blockFadeIn .5s .7s $animations-easing both,
    '.views-row:nth-child(9)': blockFadeIn .5s .8s $animations-easing both,
    '.views-row:nth-child(10)': blockFadeIn .5s .9s $animations-easing both,
    '.views-row:nth-child(11)': blockFadeIn .5s 1s $animations-easing both,
    '.views-row:nth-child(12)': blockFadeIn .5s 1.1s $animations-easing both,
    '.pager': blockFadeIn .5s 1.2s $animations-easing both,
  ),
  '.block--views-blockpartners-listing.animation-in': (
    '.heading': blockTitle 1s $animations-easing both,
    '.level-wrapper:nth-child(1)': blockFadeIn 1s $animations-easing both,
    '.level-wrapper:nth-child(2)': blockFadeIn 1s .5s $animations-easing both,
    '.level-wrapper:nth-child(3)': blockFadeIn 1s 1s $animations-easing both,
  ),
  '.block--views-blockcategories-listing.animation-in': (
    '.heading': blockTitle 1s $animations-easing both,
    '.views-row:nth-child(n)': blockFadeIn 1s $animations-easing both,
    '.views-row:nth-child(2n)': blockFadeIn 1s .3s $animations-easing both,
  ),
  '.block--categories.animation-in': (
    '.field--name-field-categories .field__item:nth-child(1) .field--name-field-image img': blockShowIn .5s $animations-easing both,
    '.field--name-field-categories .field__item:nth-child(1) .term-content': blockFadeIn .7s .2s $animations-easing both,
    '.field--name-field-categories .field__item:nth-child(2) .field--name-field-image img': blockShowIn .5s .9s $animations-easing both,
    '.field--name-field-categories .field__item:nth-child(2) .term-content': blockFadeIn .7s 1.1s $animations-easing both,
    '.field--name-field-categories .field__item:nth-child(3) .field--name-field-image img': blockShowIn .5s 1.1s $animations-easing both,
    '.field--name-field-categories .field__item:nth-child(3) .term-content': blockFadeIn .7s 1.3s $animations-easing both,
    '.shape-wrapper:before': shapeFrameRotate 4s $animations-easing infinite alternate-reverse,
    '.shape-wrapper .frame': (
      blockSlideIn 1s $animations-easing both,
      shapeFrameRotate 4s $animations-easing infinite alternate-reverse,
    ),
    '.shape-wrapper .frame::before': (
      shapeFrameBackgroundRotate 5s linear infinite,
    ),
    '.block-content .heading': blockTitle 1s .5s $animations-easing both,
    '.block-content .field--name-field-description': blockFadeIn 1s .6s $animations-easing both,
    '.block-content .categories-links': blockFadeIn 1s .7s $animations-easing both,
    '.block-content .field--name-field-p-link .field__item:nth-child(1)': blockFadeIn 1s .8s $animations-easing both,
    '.block-content .field--name-field-p-link .field__item:nth-child(2)': blockFadeIn 1s .9s $animations-easing both,
  ),
  '.block--cases-slider.animation-in': (
    '.field--name-field-heading': blockTitle 1s $animations-easing both,
    '.field--name-field-link': blockFadeIn 1s .1s $animations-easing both,
    '.block-view': blockFadeAngleIn 1s linear both,
  ),
  '.block--news-slider.animation-in': (
    '.field--name-field-heading': blockTitle 1s $animations-easing both,
    '.field--name-field-link': blockFadeIn 1s .1s $animations-easing both,
    '.block-view': blockFadeAngleIn 1s linear both,
  ),
  '.block--views-blocknews-listing.animation-in': (
    '.block__title': blockFadeIn 1s $animations-easing both,
    '.views-row:nth-child(1)': blockFadeIn .5s $animations-easing both,
    '.views-row:nth-child(2)': blockFadeIn .5s .1s $animations-easing both,
    '.views-row:nth-child(3)': blockFadeIn .5s .2s $animations-easing both,
    '.views-row:nth-child(4)': blockFadeIn .5s .3s $animations-easing both,
    '.views-row:nth-child(5)': blockFadeIn .5s .4s $animations-easing both,
    '.views-row:nth-child(6)': blockFadeIn .5s .5s $animations-easing both,
    '.views-row:nth-child(7)': blockFadeIn .5s .6s $animations-easing both,
    '.views-row:nth-child(8)': blockFadeIn .5s .7s $animations-easing both,
    '.views-row:nth-child(9)': blockFadeIn .5s .8s $animations-easing both,
    '.views-row:nth-child(10)': blockFadeIn .5s .9s $animations-easing both,
    '.views-row:nth-child(11)': blockFadeIn .5s 1s $animations-easing both,
    '.views-row:nth-child(12)': blockFadeIn .5s 1.1s $animations-easing both,
    '.pager': blockFadeIn .5s 1.2s $animations-easing both,
  ),
);
