@import "variables";

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

@keyframes rotate_cc {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-180deg);
  }
}


h1,
h2,
h3,
h4,
h5,
h6 {
  .underline {
    width: 60px;
    height: 4px;
    left: 0;
    bottom: -4px;
    background: $header-underline;
  }
}


@each $border in $borders {
  .b-#{$border} {
    border-width: #{$border}px !important;
  }
  .bt-#{$border} {
    border-top-width: #{$border}px !important;
  }
  .br-#{$border} {
    border-right-width: #{$border}px !important;
  }
  .bb-#{$border} {
    border-bottom-width: #{$border}px !important;
  }
  .bl-#{$border} {
    border-left-width: #{$border}px !important;
  }
  .bx-#{$border} {
    border-left-width: #{$border}px !important;
    border-right-width: #{$border}px !important;
  }
  .by-#{$border} {
    border-top-width: #{$border}px !important;
    border-bottom-width: #{$border}px !important;
  }
}


@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $size, $length in $spacers {
      .t#{$infix}-#{$size} {
        top: $length;
      }
      .b#{$infix}-#{$size} {
        bottom: $length;
      }
      .l#{$infix}-#{$size} {
        left: $length;
      }
      .r#{$infix}-#{$size} {
        right: $length;
      }
    }
  }
}



@each $bp, $value in $grid-breakpoints {
  @if $bp == "xs" {
    @each $col in $columns {
      .columns-#{$col} {
        columns: #{$col};
      }
    }
    @each $idx, $height in $heights {
      .h-#{$idx} {
        height: #{$height};
      }
      .mnh-#{$idx} {
        min-height: #{$height};
      }
      .mxh-#{$idx} {
        max-height: #{$height};
      }
    }
  }
  @else {
    @media only screen and (min-width: $value) {
      @each $col in $columns {
          .columns-#{$bp}-#{$col} {
            columns: #{$col};
          }
      }
      @each $idx, $height in $heights {
        .h-#{$bp}-#{$idx} {
          height: #{$height};
        }
        .mnh-#{$bp}-#{$idx} {
          min-height: #{$height};
        }
        .mxh-#{$bp}-#{$idx} {
          max-height: #{$height};
        }
      }
    }
  }
}


@each $bp, $value in $grid-breakpoints {
  @if $bp != "xs" {
    @media only screen and (min-width: $value) {
      @each $size in $fa-sizes {
        .fa-#{$bp}-#{$size}x {
          font-size: #{$size}em;
        }
      }
    }
  }
}


@each $bp, $value in $grid-breakpoints {
  @if $bp != "xs" {
    @media only screen and (min-width: $value) {
      @each $align in $aligns {
        .text-#{$bp}-#{$align} {
          text-align: #{$align};
        }
      }
      @each $just in $justify {
        .justify-content-#{$bp}-#{$just} {
          justify-content: #{$just};
        }
      }
    }
  }
}


// primary background colors

.bg-primary {
  background-color: $primary;
}
.bg-primary-0 {
  background-color: $primary-0;
}
.bg-primary-light-1 {
  background-color: $primary-light-1;
}
.bg-primary-light-2 {
  background-color: $primary-light-2;
}
.bg-primary-dark-1 {
  background-color: $primary-dark-1;
}
.bg-primary-dark-2 {
  background-color: $primary-dark-2;
}


.rotate {
  animation: rotate 0.5s ease-in-out;
}

.rotate-cc {
  animation: rotate_cc 0.5s ease-in-out;
}


.text-primary {
  color: $primary-dark-1 !important;
}

[data-toggle="dropdown"] {
  cursor: pointer;
}


.edito,
#glossary-term {
  a[href]:not([href="#"]) {
    font-style: italic;
    font-weight: $glossary-term-font-weight;
  }
}


.btn {
  &.see-all {
    &:hover {
      color: $page-bg;
      background-color: $primary;
    }
  }
}


.lh {
  &-10 {
    line-height: 1.0;
  }
  &-11 {
    line-height: 1.1;
  }
  &-12 {
    line-height: 1.2;
  }
  &-13 {
    line-height: 1.3;
  }
  &-14 {
    line-height: 1.4;
  }
  &-15 {
    line-height: 1.5;
  }
}


.position {
  &-left {
    left: 0 !important;
    right: auto !important;
  }
  &-right {
    left: auto !important;
    right: 0 !important;
  }
  &-top {
    top: 0 !important;
    bottom: auto !important;
  }
  &-bottom {
    top: auto !important;
    bottom: 0 !important;
  }
}

.spacer {
  padding: 1em 0;

  &.double {
    padding: 2em 0;
  }

  hr {
    margin: 0;
    padding: 0;
  }
}


.modal-auto {
  .modal-dialog {
    max-width: 20em;
    transition: max-width .5s ease-in, transform .3s ease-out !important;
  }
}


.thumbnail {
  img {
    width: auto !important;
    max-width: 150px;
    height: auto !important;
    max-height: 150px;
  }
}


.icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.svg-container {
  img {
    width: 100%;
    height: 100%
  }
  svg {
    max-width: 100%;
    max-height: 100%;
  }
}

.filter {
  &-grayscale {
    filter: #{"grayscale()"};
  }
}



.wrapper-quote {
  position: relative;
  padding-left: 80px;

  &::before {
    content: "«";
    display: block;
    position: absolute;
    left: 20px;
    font-size: 4em;
    font-style: italic;
    line-height: 0.5;
  }
  .quote {
    font-style: italic;
  }
}


.wrapper-image {
  img {
    width: 100%;
  }
}


.wrapper-imagemap {
  position: relative;
  display: inline-flex;
  width: 100%;

  img {
    width: 100%;
    height: 100%;
  }

  svg {
    position: absolute;
    left: 0;
    right: 0;
    fill: #888;
    fill-opacity: 0;
    width: 100%;
    height: 100%;
  }
}


.wrapper-nav-tabs {
  a {
    &:hover {
      color: $nav-tabs-hover;
    }
  }
}


.tags {
  a {
    font-weight: $tags-font-weight !important;
    font-style: normal !important;
  }
  a:hover {
    .badge {
      color: white !important;
      background-color: $tags-badge-hover !important;
    }
  }
}


.thesaurus-term {
  cursor: pointer;
  font-style: italic;
  font-weight: $thesaurus-term-font-weight;
  color: $thesaurus-term;
}
