@import "variables";
@import "mixins";

$footer-links: #c7c7c7 !default;
$footer-links-hover: #ffffff !default;
$footer-color: #ffffff !default;

$footer-column-gap: (1rem * 1.6) !default;

#footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  background: $footer-bg;
  padding: $space-sm 0;
  color: $footer-color;
  .container > .row {
    justify-content: space-between;
  }
  &.footer-one {
    .widget-area {
      flex: 1 0 100%;
      max-width: 100%;
    }
  }
  &.footer-two {
    .widget-area {
      flex: 1 0 50%;
      max-width: 50%;
      @include bp("md") {
        flex: 1 0 100%;
        max-width: 100%;
      }
    }
  }
  &.footer-three {
    .widget-area {
      flex: 1 0 33.333333%;
      max-width: 33.333333%;
      @include bp("md") {
        flex: 1 0 100%;
        max-width: 100%;
      }
    }
  }
  &.footer-four {
    .widget-area {
      flex: 1 0 25%;
      max-width: 25%;
      @include bp("md") {
        flex: 1 0 100%;
        max-width: 100%;
      }
    }
  }
  &.footer-five {
    .widget-area {
      flex: 1 0 calc(20% - #{$footer-column-gap});
      max-width: calc(20% - #{$footer-column-gap});
      @include bp("md") {
        flex: 1 0 100%;
        max-width: 100%;
      }
    }
  }
  .widget-area {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    @include bp("md") {
      margin-bottom: $space-sm;
      text-align: center;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .footer-column-wrap {
      ul {
        list-style: none;
        padding: 0;
        li {
          a {
            padding: $space-xs/3 0;
            display: inline-block;
            font-size: $fs-1;
          }
        }
      }
      li,
      p,
      span {
        color: $footer-color;
        font-size: $fs-small;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        color: $footer-color;
        margin: 0 0 $space-xs;
        font-size: $fs-1;
        text-transform: uppercase;
        font-weight: $fw-bold;
      }
      a {
        text-transform: uppercase;
        font-size: $fs-1;
        font-weight: 300;
        color: $footer-links;
        &:hover {
          color: $footer-links-hover;
        }
        @include bp("sm") {
          line-height: 2em; // nech google nepicuje ze tlacidla su blizko pri sebe
        }
      }
      p,
      ul {
        margin: 0;
      }
      figure {
        margin-bottom: (2rem * 1.6);
      }
    }
  }
}

#copyright {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  background: $footer-bg;
  padding: $space-sm 0;
  color: $footer-color;
  .container > .row {
    justify-content: space-between;
    align-items: center;
  }
  &.copyright-center {
    .widget-area {
      flex: 1 0 100%;
      max-width: 100%;
      text-align: center;
    }
  }
  &.copyright-left-and-right {
    .widget-area {
      flex: 1 0 50%;
      max-width: 50%;
      @include bp("md") {
        flex: 1 0 100%;
        max-width: 100%;
        text-align: center !important;
      }
    }
    #copyright-left {
      text-align: left;
    }
    #copyright-right {
      text-align: right;
    }
  }
  &.copyright-left-right-center {
    .widget-area {
      flex: 1 0 33.333333%;
      max-width: 33.333333%;
      &:nth-child(1) {
        text-align: left;
      }
      &:nth-child(2) {
        text-align: center;
      }
      &:nth-child(3) {
        text-align: right;
      }
      @include bp("md") {
        flex: 1 0 100%;
        max-width: 100%;
        text-align: center !important;
      }
    }
  }
  .widget-area {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    @include bp("md") {
      margin-bottom: $space-sm;
    }
    .copyright-column-wrap {
      ul {
        list-style: none;
        padding: 0;
        li {
          a {
            padding: $space-xs/3 0;
            display: inline-block;
            font-size: $fs-1;
          }
        }
      }
      li,
      p,
      span {
        color: $footer-color;
        font-size: $fs-small;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        color: $footer-color;
        margin: 0 0 $space-xs;
        font-size: $fs-1;
        text-transform: uppercase;
        font-weight: $fw-bold;
      }
      a {
        text-transform: uppercase;
        color: $footer-links;
        &:hover {
          color: $footer-links-hover;
        }
      }
      p,
      ul,
      figure {
        margin: 0;
      }
    }
  }
}
