$color-footer-background:  #222;
$color-footer-text:        $color-grey-heading;
$color-footer-link:        #898989;
$color-footer-link--hover: $color-white;
$color-footer-divider:     darken($color-grey-body, 20%);
$color-footer-icon:        darken($color-footer-text, 15%);

.footer--main {
  padding-top: em($gutter * 2);
  background: $color-footer-background;
}

.footer-logo {
  display: block;
  width: em(115); // Width of footer logo
  height: em(30); // Height of footer logo
  content: '';
  background: asset-svg-url(shopify-logo, $color-footer-icon) no-repeat;
}

.footer-column {
  @extend .grid-2;
  font-size: em(15);
}

.footer-section {
  @include clearfix;
  margin-bottom: em($gutter);
}

.footer-heading {
  @include font-brandon-bold;
  margin: 0 0 em($gutter / 2 - 6);
  padding-bottom: em($gutter / 2);
  color: $color-footer-text;
  border-bottom: 1px solid $color-footer-divider;
  font-size: em(16);
}

.footer-link {
  @include font-brandon-regular;
  display: block;
  padding: em(6) 0;
  color: $color-footer-link;
  transition: color 300ms ease-in-out;

  &:hover,
  &:focus {
    color: $color-footer-link--hover;
  }
}

.footer-top {
  padding-bottom: em($gutter);

  @include shopify-breakpoint($mobile) {
    .footer-section--help {
      @include omega;
      float: right;
    }
  }
}

.footer-bottom {
  @extend .footer--main;
  padding: em($gutter) 0;
  background: $color-footer-background;
  border-top: 1px solid $color-footer-divider;

  a {
    color: $color-footer-link;
    transition: color 300ms ease-in-out;

    @include shopify-breakpoint($desktop-up) {
      line-height: em($gutter);
    }

    &:hover {
      color: $color-footer-link--hover;
    }
  }
}

.footer-bottom-item {
  @include font-brandon-regular;

  @include shopify-breakpoint($mobile) {
    margin-bottom: em($gutter / 2);
  }
}

.footer-bottom__links > a {
  line-height: em($gutter);
  white-space: nowrap;

  @include shopify-breakpoint($mobile) {
    display: block;
  }
}

.footer-country-select {
  display: inline-block;
  position: relative;
  width: auto;
  line-height: em($gutter);

  > select {
    @include font-brandon-light;
    height: auto;
    width: auto;
    padding: 0 em(25);
    font-size: em(15);
    color: $color-footer-link;
    background: transparent;
    border: 0;
    cursor: pointer;
    appearance: none;

    @include shopify-breakpoint($desktop-up) {
      height: $gutter;
    }

    &:focus {
      color: $color-footer-link--hover;
    }
  }

  // IE inherits option colors from the select menu, causing this text to be
  // illegible on IE
  option {
    color: $color-black;
  }

  &:before {
    top: 50%;
    margin-top: em(-6);
    width: em(12);
    height: em(12);
    background-image: asset-svg-url(caret-down, $color-footer-icon);
  }

  &:after {
    pointer-events: none;
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    margin-top: em(-8);
    height: em(16);
    width: em(16);
    background: asset-svg-url(globe-simple, $color-footer-icon) no-repeat;
    background-size: 100% 100%;
  }
}

:-moz-any(.footer-country-select):before {
  display: none;
}

.footer-social__icon {
  float: left;
  width: em(18);
  height: em(18);
  margin: em(5) em(8) em(8) 0;
  padding: 0;
  white-space: nowrap;

  @include shopify-breakpoint($tablet-down) {
    margin-right: em(12);
  }

  .icon {
    width: 100%;
    height: 100%;
    fill: $color-footer-icon;
    transition: fill 300ms ease-in-out;
  }

  &:hover,
  &:focus {
    .icon {
      fill: $color-footer-link--hover;
    }
  }
}