@mixin footer__skincolor($colour) {

  $primary-color     : $colour;
  $secondary-colour  : $grey;
  $background        : invert($primary-color);
  $background-dark   : darken($primary-color, 5%);
  $border            : 0 transparent;



  @if $primary-color == $white {
    $secondary-colour : $grey;
    $background       : $black;
    $background-dark  : darken($black, 5%);
    $border           : transparent;
   }
   @else if $primary-color == $black {
     $secondary-colour : $grey;
     $background       : $white;
     $background-dark  : $grey-lightest;
     $border           : $grey-light;
   }

  color: $primary-color;
  background: $background;
  border-top: 1px solid $border;
  @if $primary-color == $white {
      h1, h2, h3, h4, h5, h6 {
        color: $primary-color;
      }
  }
  a {
    color: $secondary-colour;
    &:hover, &:active, &:focus {
      color: $primary-color;
      &.btn {
        background: transparent;
        border-color: $primary-color;
      }
    }
  }

  .widget {
    a:before { background-color: rgba($primary-color, 0.5) }
  }
  #colophon {
    background: $background-dark;
  }

  label {
    color: $primary-color;
  }
  .czr-form {
    .form-group label {
       color: $primary-color;
    }
    .form-group.in-focus label {
      color: $secondary-color-light;
    }

    input:not([type='submit']):not([type='button']):not([type='number']):not([type='checkbox']):not([type='radio']), textarea,
    .form-control {
      color: $primary-color;
      border-color: $primary-color;
    }
  }
}

#footer-horizontal-widget-area {
  .widget__container.container-fluid > .row > .col-12 {
    //remove widget col padding when in full-width
    padding-right: 0;
    padding-left: 0;
    overflow: hidden;
  }
  .czr-gallery.row {
    figure {
      margin-bottom: 0;
    }
  }
}
.footer__wrapper {
  .footer-skin-dark  & { @include footer__skincolor($white); }
  .footer-skin-light & { @include footer__skincolor($black); }
  font-size: 90%;

  .widget__wrapper {
    padding-top: $base-line-height*3;
    padding-bottom: $base-line-height*1.5;

    @at-root .footer__wrapper h5 { @extend .semi-bold; }

    @at-root .footer__wrapper .widget > h5  { margin-bottom: $base-line-height; }
    @at-root .footer__wrapper .textwidget   { width:90% }

  //  @at-root .footer__wrapper .about {
  //    position:relative;
  //  p {
  //    display:inline-block;
  //    position:relative;
  //    width:80%;
  //    float:left;
  //    margin:0;
  //  }
  //  .branding__logo {
  //    margin-right: $base-line-height*2;
  //    float:left;
  //    width:auto;
  //    position:relative;
  //    display:inline-block;
  //    max-width:100px;
  //    img {
  //      max-height:60px;
  //    }
  //  }//.branding__logo
  //}//.about

    @at-root .footer__wrapper .widget-contact-info-content {
      p  {
        line-height: 1.1em;
      }
    }

    .widget {
      margin-bottom: $base-line-height*2;
      li:not(:last-of-type) {
        margin-bottom: $base-line-height/2
      }
    }

    @include media-breakpoint-down(md) {
      @at-root .footer__wrapper .widget  { padding: $base-line-height;  }
    }
  }//.widget__wrapper

  .colophon__row {
    padding-top: $base-line-height/2;
    padding-bottom: $base-line-height/2;
    font-size: ms(1);

    @at-root .colophon__row {

      .footer__credits {
        @extend .small;
        @extend .letter-spacing-1;
        color: $grey;
        vertical-align: middle;
        display: inline-block;
        line-height: 1.6em;
        p {
          margin: 0
        }
        .czr-credits { font-size: 0.7rem; margin-top: 0.5rem; }

        //make sure the WordPress icon font-family in the Footer Credits is always FontAwesome
        //despite any "footer credits link" customization in the Font Customizer
        footer#footer & a.fab { font-family: 'Font Awesome\ 5 Brands' !important; }

      }
      .footer__credits { font-size: 0.82rem; }
      .footer__credits,
      .social-links {
        margin:1em 0;
      }
    }
    @include media-breakpoint-down(xs) {
      @at-root .colophon__row  { text-align: center; }
    }
    //in b4 stable col*auto max-width is set to none, we always want it to be set to 100%
    [class*=col] {
      max-width: 100%
    }
  }//.colophon__row
}//.footer__wrapper


/* FRONT NOTIFICATIONS
/* ------------------------------------ */
#bottom-front-notification {
    bottom: -100%;
    background-color: rgba(0, 0, 0, 0.85);
    padding: 20px 0;
    position: fixed;
    text-align: center;
    right: 0;
    left: 0;
    z-index: 10000;
    color: #fff;
    display: block;
    @include transition( all 0.45s ease-in-out );
    font-size: 1.25em;
    .note-content {
      display: inline-block;
      line-height: 20px;
      width: 80%;
      font-size: 1rem;
      h2 {
        font-size: 1.5em;
        line-height: 1.6em;
        color: #fff;
        margin-bottom: 15px;
        margin-top: 0;
      }
      a {
        color: #fff;
        text-decoration: underline;
      }
      p {
        line-height: 1.5em;
        margin-top: 0;
      }
    }
    .fas:before {
      top: -1px;
      position: relative;
      padding-left: 2px;
    }
    .close-note {
        position: absolute;
        top: 10px;
        right: 25px;
        font-size: 31px;
        cursor: pointer;
    }
}