<template>
  <header class="header">
    <div class="header__left">
      <HeaderLogo />
      <HeaderSlogan />
    </div>
    <div class="header__right">
      <HeaderNavigation />
      <Socials color="#000" class="header__right-socials" />
    </div>
  </header>
</template>

<script>
import HeaderLogo from './HeaderLogo.vue';
import HeaderSlogan from './HeaderSlogan.vue';
import HeaderNavigation from './HeaderNavigation.vue';
import Socials from '@/components/Socials.vue';

export default {
  components: {
    HeaderLogo,
    HeaderSlogan,
    HeaderNavigation,
    Socials,
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;

  border-bottom: 3px solid $color-black;

  padding-top: 3.8%;
  padding-bottom: 3.7%;

  &__left,
  &__right {
      width: 50%;

      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  &__left {
    @media (max-width: 1120px) {
        width: 40%;
    }

    @media (max-width: 830px) {
        width: auto;
    }
  }

  &__right {
    @media (max-width: 1120px) {
        width: 60%;
    }

    @media (max-width: 830px) {
        width: 100%;
    }

    @media (max-width: 590px) {
        justify-content: center;
        flex-direction: column;
        align-items: flex-end;

        padding-left: 12%;

        &-socials {
          justify-content: flex-end;
        }
    }

    @media (max-width: 420px) {
        padding-left: 0;
    }
  }
}
</style>