<script lang="ts">
  import { t } from '$lib/translations';

  export let className: string | undefined;
  export let classNameTabs: string | undefined;
</script>

<div class="headerTabs {className} {classNameTabs}">
  <div class="container">
    <div class="headerTabsWrapper">
      <div class="headerTabsItems">
        <a href="https://group.quadcode.com" class="headerTabsItem">{$t('Quadcode Group')}</a>
        <a href="https://quadcode.com" class="headerTabsItem 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';

  .headerTabs {
    background: $techWhite;

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

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

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

    .headerTabsItems {
      display: flex;
      align-items: center;
    }

    .headerTabsItem {
      @include smallCTA;

      padding: 14px 25px 14px 25px;
      position: relative;

      @include breakpoint-down('deskL') {
        padding: 15px 21px 15px 25px;
      }

      @include breakpoint-down('deskS') {
        padding: 13px 24px 13px 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 {
        color: $fontPrimary;

        @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;
          }
        }
      }
    }

    :global(.headerTabsLang) {
      height: 50px;

      @include breakpoint-down('deskS') {
        height: 40px;
      }
    }

    :global(.headerTabsLang .lang__btn) {
      padding: 14px 0;

      @include breakpoint-down('deskS') {
        padding: 9px 0;
      }
    }

    &.ghostWhite:not(.defaultTabs) {
      background: $techWhite15;

      .headerTabsItem {
        &:first-of-type {
          color: $techWhite30;
          border-right: 2px solid transparent;

          &:hover {
            color: $techWhite;
          }
        }

        &:last-of-type {
          color: $techWhite;
        }
      }
    }
  }
</style>