@import "settings";
@import "separators";
@import "utils";
@import "links";

$bonsai-include-footer: $bonsai-include-components !default;

@mixin footer-google-translate-widget {
  .goog-te-gadget-simple {
    @include google-translate-styling;

    float: right;

    @include breakpoint(small down) {
      float: left;
    }
  }
}

@mixin footer {
  & .vertical-rule-footer {
    @include vertical-rule-helper(100%, 0, $border-color: $bonsai-light-gray);

    @include breakpoint(small down) {
      border: none;
    }
  }

  p {
    line-height: 1.4;
  }

  & .menu.simple.responsive-links {
    li {
      margin-left: 0;
    }

    a {
      text-decoration: underline;
      padding: $bonsai-spacing-small;

      &:hover,
      &:focus,
      &:active {
        text-decoration: none;
      }
    }

    @include breakpoint(medium down) {
      @include menu-direction(vertical);

      align-items: start;

      a {
        padding: 0;
      }
    }
  }

  & ul.responsive-separator,
  & ol.responsive-separator,
  & div.responsive-separator {
    margin-left: $bonsai-spacing-small;

    @include breakpoint(medium down) {
      margin-left: $bonsai-spacing-extra-large;
    }

    @include breakpoint(small down) {
      margin-left: 0;
    }
  }

  & {
    background-color: get-color(very-light-gray);
    padding-top: map_get($spacing-sizes, 'xl');

    li {
      margin-bottom: $bonsai-spacing-small;
    }

    a {
      &.button {
        width: 120px;
      }
    }

    @include footer-google-translate-widget;
  }
}

@mixin bonsai-footer {
  @if $bonsai-include-footer {
    footer {
      @include footer;
    }
  }
}