<script lang="ts">
  import { t } from '$lib/translations';
  import logo from '../../assets/logo-black.svg';
</script>

<div class="footerTabs">
  <div class="container">
    <div class="footerTabsWrapper">
      <div class="footerTabsLogo">
        <img src={logo} alt="logo">
      </div>
      <div class="footerTabsItems">
        <a href="https://group.quadcode.com" class="footerTabsItem">{$t('Quadcode Group')}</a>
        <a href="https://quadcode.com" class="footerTabsItem active">{$t('Quadcode Brokerage Solutions')}</a>
      </div>
    </div>
  </div>
</div>

<style lang="scss">
  @import 'src/scss/variables';
  @import 'src/scss/mixins';
  @import 'src/scss/media';

  .footerTabs {
    background: $techBlue1;

    .footerTabsWrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;

      @include breakpoint-down('tabM') {
        margin-left: -20px;
        width: calc(100% + 20px * 2);
      }
    }

    .footerTabsLogo {
      display: flex;
      max-width: 197px;

      @include breakpoint-down('tabM') {
        display: none;
      }

      :global(img) {
        width: 100%;
        height: auto;
      }
    }

    .footerTabsItems {
      display: flex;
      align-items: center;

      @include breakpoint-down('tabM') {
        width: 100%;
      }
    }

    .footerTabsItem {
      @include footerLink;

      padding: 22px 25px 22px 22px;
      position: relative;

      @include breakpoint-down('deskL') {
        padding: 19px 24px 18px 26px;
      }

      @include breakpoint-down('deskS') {
        padding: 19px 24px 21px 24px;
      }

      @include breakpoint-down('tabM') {
        padding: 15px 36px;
        width: calc(100% / 2);
      }

      &:first-of-type {
        transition: 0.4s ease-in-out;
        color: $techGrey30;
        border-right: 2px solid $techWhite;

        &:hover {
          color: $fontPrimary;
        }
      }

      &.active {
        @include breakpoint-down('tabM') {
          background: $techWhite;
        }

        &:after {
          content: '';
          position: absolute;
          height: 2px;
          width: 100%;
          bottom: 0;
          left: 0;
          right: 0;
          background: $redPrimary;

          @include breakpoint-down('tabM') {
            bottom: auto;
            top: 0;
          }
        }
      }
    }
  }
</style>