@use '../globals/variables' as *;
@use '../globals/mixins' as *;
@use '../globals/typography' as *;

footer[role="contentinfo"] {
  background-image: url('/themes/custom/skrymten/assets/images/footer-illustration.svg');
  background-repeat: no-repeat;
  background-position: top right;
  font-size: var(--medium-font-size);
  padding: var(--gutter) 0;
  background-color: var(--footer-background);

  // same color dark / light mode
  color: var(--white);

  a {
    color: var(--white);
  }

  .footer-top, .footer-bottom {
    @include inner-container;
  }

  .footer-top {
    @media #{$media-tablet-desktop} {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: var(--gutter);
    }
  }

  // Config pages
  .field--name-field-title {
    @include font-footer-heading;
  }
}

.footer-bottom-second {
  position: relative;
}

.to-top {
  a {
    position: absolute;
    bottom: calc(var(--2x-gutter) * -1);
    right: 0;
    height: 42px;
    width: 42px;
    scroll-behavior: smooth;
    background-color: white;
    background-image: url('/themes/custom/skrymten/assets/images/trfk-icons/pointed-arrow-blue-up.svg');
    background-repeat: no-repeat;
    background-position: 50% ;
    border-radius: 21px;
    text-indent: -10000000px;

  }
}

.footer-bottom-first, .footer-bottom-second {
  .menu {
    padding: 0;
    margin: var(--2x-gutter) 0;
    li {
      display: inline-block;
      margin-right: var(--gutter);
    }
  }
}

.footer-bottom-first {
  // SOME menu
  .menu {
    a {
      text-decoration: none;
    }
    li {
      --icon-size: 28px;
      height: var(--icon-size);
      line-height: var(--icon-size);
      padding-left: 36px;
      background-image: url('/themes/custom/skrymten/assets/images/trfk-icons/some-facebook.svg');
      background-size: var(--icon-size);
      background-repeat: no-repeat;
      background-position: 0 50% ;
      &.linkedin {
        background-image: url('/themes/custom/skrymten/assets/images/trfk-icons/some-linkedin.svg');
      }
      &.youtube {
        background-image: url('/themes/custom/skrymten/assets/images/trfk-icons/some-youtube.svg');
      }
      &.instagram {
        background-image: url('/themes/custom/skrymten/assets/images/trfk-icons/some-instagram.svg');
      }
    }
  }
}

.footer-bottom-second {
  .menu {
    li {
      @media #{$media-mobile} {
        display: block;
      }
    }
  }
}