@use 'sass:map';
@use '@inside-library/styles/mixins/partials/common-mixin' as *;
@use '@inside-library/styles/variables/variables' as *;

.layout-horizontal__header header {
  height: 75px;

  @include custom-break-between(1600px, 1450px) {
    padding: 0 var(--spacing-3xl);
  }

  @include custom-break-between(1450px, #{map.get($breakpoints, tablet)}) {
    padding: 0 var(--spacing-l);
  }

  @include tablet {
    padding: var(--spacing-m) var(--spacing-xl) var(--spacing-m)
      var(--spacing-xl);
  }
}

header {
  .header__logo {
    .img--svg {
      width: 180px;

      @include custom-break-between(1100px, #{map.get($breakpoints, tablet)}) {
        width: 90px;
      }
    }
  }

  @include custom-break-between(1100px, #{map.get($breakpoints, tablet)}) {
    .header__user-action {
      margin-left: var(--spacing-m);
    }
  }
}
