ihk24/gfi-ihk-2024/stories/components/footer/footer.scss

@use '../../_global/styles/mixins' as *;
@use '../../_global/styles/vars' as *;

.page-footer {
  padding: var(--section-padding) 0;
  background-color: var(--color-background);
  border-bottom: var(--border-width) solid var(--color-border);
  z-index: 10;
  &.footer-picto {
    padding-top: calc(var(--section-padding) + 300px);
    background-repeat: repeat-x;
    background-size: auto 300px;
    background-position: 50% 0;
    background-image: url('../../assets/img/footer-picto.svg');
    @media(max-width: 767px) {
      padding-top: calc(var(--section-padding) + 200px);
      background-size: auto 200px;
    }
  }

  .container {
    @media(max-width: 767px) {
      display: flex;
      flex-direction: column;
    }
  }

  .row.contact {
    margin-top: calc(var(--col-padding) * -0.5);

    .col {
      flex: 1 1 33.3333%;
      max-width: 33.3333%;

      @media(max-width: 767px) {
        flex: 1 1 100%;
        max-width: 100%;
        padding-top: 0;
        padding-bottom: 0;
      }
    }

    .like-h2 {
      margin-top: var(--section-headline-margin);
    }

    h6:first-child, .like-h6:first-child {
      margin-top: 0;
      margin-bottom: 0.5em;
    }

    .btn {
      margin: 0.2em -0.1em 1em;
    }
  }

  .contact-list {
    list-style: none;
    margin: 0 -0.05em 0.7em;
    padding: 0;

    li {
      margin-bottom: 0.3em;
    }

    a {
      position: relative;
      padding-left: calc(var(--icon-size) * 1.4);
      white-space: nowrap;

      &::before {
        position: absolute;
        font-family: 'Icons', sans-serif;
        font-size: var(--icon-size);
        line-height: 1;
        top: 50%;
        margin-top: calc(var(--icon-size) / -2);
        transition: 0.2s ease;
        left: 0;
      }

      &::after {
        content: '';
        @include full-size;
        margin: -0.2em -0.3em;
        border-radius: var(--border-radius-xs);
        pointer-events: none;
        transition: 0.3s ease;
      }

      &:focus-visible {
        outline: none;

        &::after {
          @include focus-standalone();
        }
      }
    }

    .mail a::before {
      @include icon-email;
    }
    .phone a::before {
      @include icon-telefon;
    }
  }

  .row.barrier-free {
    text-align: right;

    ul {
      list-style: none;
      margin: 0 -0.5em;
      padding: 0;

      &::after {
        content: '';
        position: relative;
        display: block;
        border-bottom: 1px solid var(--color-surface-inset);
        margin: 1em 0.5em 0;
      }
    }

    li {
      position: relative;
      display: inline-flex;
      align-items: center;
      margin: 0 0.5em;

      &::before {
        font-family: 'Icons', sans-serif;
        order: 1;
        font-size: var(--icon-size);
        margin-left: 0.2em;
        transition: 0.2s ease;
      }

      &:hover::before {
        color: var(--color-text-accent);
      }
    }

    a {
      &::before {
        content: '';
        @include full-size;
        margin: 0 -0.4em;
        border-radius: var(--border-radius-xs);
        pointer-events: none;
        transition: 0.3s ease;
      }

      &:focus {
        outline: none;
      }

      &:focus-visible {
        &::before {
          @include focus-standalone();
        }
      }

      &::after {
        content: '';
        @include full-size;
      }
    }

  }

  .row.copyright {
    font-size: var(--font-size-small);

    @media(min-width: 1200px) {
      .col:first-child {
        flex: 1 1 66.66667%;
        max-width: 66.66667%;
      }
      .col:last-child {
        flex: 1 1 33.33333%;
        max-width: 33.33333%;
      }
    }

    @media(max-width: 1199px) {
      order: 1;
      padding-right: 80px;

      .col:last-child {
        min-width: 100%;
        order: -1;
      }
    }

    p {
      margin-bottom: 8px;
    }
  }

  .row.social {
    @media(max-width: 767px) {
      margin: 0.5em calc(var(--col-padding) * -1);
    }

    .col {
      padding-top: 0;
      padding-bottom: 10px;
    }
  }

  .legal-nav {
    font-size: var(--font-size-small);

    @media(min-width: 768px) {
      text-align: right;
    }

    .col {
      padding-bottom: 0;
    }

    ul {
      padding: 0;
      margin: 0 -0.6em;
      list-style: none;

      @media(max-width: 767px) {
        &:after {
          content: "";
          position: relative;
          display: block;
          border-bottom: 1px solid var(--color-surface-inset);
          margin: 26px 8px 20px;
        }
      }
    }

    li {
      display: inline-block;
      margin: 0 0.3em;
    }

    a {
      display: block;
      padding: 0 0.2em;
      text-decoration: none;
      border-radius: var(--border-radius-xs);
      @include focus-visible;
    }
  }

  .logos {
    margin: 0 -10px;

    @media(min-width: 1000px) {
      text-align: right;
    }

    a {
      display: inline-block;
      margin: 0 10px;
    }

    img {
      max-height: 30px;
    }
  }
}