@use "@infineon/design-system-tokens/dist/tokens";

.footer {
  & ul {
    margin-bottom: 0;
  }
}

.ifx__footer-top {
  border-bottom: 1px solid tokens.$color-gray-300;
  padding: 36px 0 40px 0;

  @media (min-width: 768px) { 
    padding: 32px 0 36px 0;
  }

  &.d-flex {
    @media (min-width: 768px) { 
      padding: 68px 0 36px 0;
    }
  }

  .ifx__mobile-show {
    display: flex;

    @media (min-width: 768px) { 
      display: none;
    }

    & img {
      margin-bottom: 68px;
    }
    
    & .row {
      margin-bottom: 40px;

      & .col-6:nth-last-child(-n+2) {
        margin-bottom: 0;
      }
    }
  }

  .ifx__desktop-show {
    display: none;

    @media (min-width: 768px) { 
      display: flex;
    }
  }

  img {
    margin-bottom: 68px;
    
    @media (min-width: 768px) { 
      margin-bottom: 0;
    }
  }

  .row {
    @media (min-width: 768px) { 
      margin-bottom: 60px;
    }
  }

  .col-6 {
    margin-bottom: 32px;

    @media (min-width: 768px) { 
      margin-bottom: 0;
    }
  }

  & p {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    color: tokens.$color-text-black;

    @media (min-width: 768px) { 
      font-size: 16px;
      margin-bottom: 8px;
    }
  }

  & li + li {
    margin-top: 9px;
  }

  & a {
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    color: tokens.$color-text-black;

    @media (min-width: 768px) { 
      font-size: 16px;
    }
  }

  & .ifx__footer-top__social-media {
    width: 100%;
    line-height: 0;

    @media (min-width: 768px) { 
      width: auto;
    }

    & a {
      display: inline-block;
      width: 24px;
      height: 24px;
    }

    & a + a {
      margin-left: 32px;
    }

    svg {
      width: 24px;
      height: 24px;
    }
  }
}

.ifx__footer-top + .ifx__footer-bottom {
  padding: 40px 0 24px 0;

  @media (min-width: 768px) { 
    padding: 24px 0;
  }
}

.ifx__footer-bottom {
  padding: 24px 0;

  ul {
    margin-bottom: 24px;
  }

  & a {
    text-decoration: none;
  }

  @media (min-width: 576px) { 
    & li + li {
      margin-left: 32px;
    }
  }

  @media (min-width: 768px) { 
    flex-direction: row-reverse;

    ul {
      margin-bottom: 0;
    }
  }
}