@use 'sass:map';
@use '@ecl/vanilla-layout-grid/mixins/breakpoints';

// Exposed variables
$theme: null !default;
$language-switcher: null !default;
$language-list: null !default;

.ecl-site-header__language,
.ecl-site-header__custom-action {
  margin: 0;
  position: static;
}

@mixin with-scrollbar {
  overflow-y: auto;
  scrollbar-color: var(--c-n) rgba(0, 0, 0, 0);
  scrollbar-width: thin;
}

@mixin arrow-up {
  background-color: map.get($theme, 'color', 'white');
  border: map.get($language-switcher, 'arrow-border');
  box-shadow: map.get($language-switcher, 'arrow-shadow');
  clip-path: polygon(
    -#{map.get($language-switcher, 'shadow-size')} -#{map.get(
        $language-switcher,
        'shadow-size'
      )},
    calc(100% + #{map.get($language-switcher, 'shadow-size')}) -#{map.get(
        $language-switcher,
        'shadow-size'
      )},
    calc(100% + #{map.get($language-switcher, 'shadow-size')})
      calc(100% + #{map.get($language-switcher, 'shadow-size')})
  );
  content: '';
  height: map.get($language-switcher, 'arrow-size');
  left: 50%;
  margin-left: calc(-#{map.get($language-switcher, 'arrow-size')} / 2);
  position: absolute;
  top: map.get($language-switcher, 'arrow-top');
  transform: translate(0%, -50%) rotate(-45deg);
  width: map.get($language-switcher, 'arrow-size');
}

.ecl-site-header__language-container,
.ecl-site-header__custom-action-overlay {
  background-color: map.get($theme, 'color', 'white');
  box-shadow: map.get($language-switcher, 'shadow');
  color: map.get($language-list, 'color');
  font: var(--f-m);
  left: 0;
  height: auto;
  margin-top: var(--s-l);
  padding-block-start: map.get(
    $language-list,
    'container-padding-mobile',
    'block-start'
  );
  padding-block-end: map.get(
    $language-list,
    'container-padding-mobile',
    'block-end'
  );
  padding-inline-start: map.get(
    $language-list,
    'container-padding-mobile',
    'inline-start'
  );
  padding-inline-end: calc(
    #{map.get($language-list, 'container-padding-mobile', 'inline-end')} +
      #{map.get($language-list, 'item-active-border-width')}
  );
  position: absolute;
  right: 0;
  width: auto;
  z-index: map.get($theme, 'z-index', 'overlay');

  // arrow with border shadow
  &::before {
    @include arrow-up;
  }
}

.ecl-site-header__language-container--push-right::before,
.ecl-site-header__language-container--full::before {
  left: auto;
  right: var(--ecl-overlay-arrow-position);
}

.ecl-site-header__language-container--push-left::before {
  right: auto;
  left: var(--ecl-overlay-arrow-position);
}

.ecl-site-header__language-header,
.ecl-site-header__custom-action-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-inline-start: calc(
    #{map.get($language-list, 'title-padding-start')} +
      #{map.get($language-list, 'item-active-border-width')}
  );
}

.ecl-site-header__language-title,
.ecl-site-header__custom-action-title {
  font: map.get($language-list, 'header-font-mobile');
}

.ecl-site-header__language-close,
.ecl-site-header__custom-action-close {
  position: absolute;
  right: map.get($language-switcher, 'close-right');
  top: map.get($language-switcher, 'close-top');

  .ecl-site-header--rtl & {
    left: map.get($language-switcher, 'close-right');
    right: auto;
  }
}

.ecl-site-header__language-content,
.ecl-site-header__custom-action-content {
  display: flex;
  flex-direction: column;

  @include with-scrollbar;
}

.ecl-site-header__language-category-title {
  font: map.get($language-list, 'category-title-font');
  font-weight: map.get($language-list, 'category-title-font-weight');
  padding-block-start: map.get(
    $language-list,
    'category-title-padding',
    'block-start'
  );
  padding-block-end: map.get(
    $language-list,
    'category-title-padding',
    'block-end'
  );
  padding-inline-start: calc(
    #{map.get($language-list, 'category-title-padding', 'inline-start')} +
      #{map.get($language-list, 'item-active-border-width')}
  );
  padding-inline-end: map.get(
    $language-list,
    'category-title-padding',
    'inline-end'
  );
}

.ecl-site-header__language-category:nth-child(2) {
  border-top: map.get($language-list, 'category-separator');
  margin-top: map.get($language-list, 'category-stack-margin');
}

.ecl-site-header__language-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ecl-site-header__language-link,
.ecl-site-header__custom-action-link {
  align-items: baseline;
  border-inline-start: map.get($language-list, 'item-active-border-width') solid
    transparent;
  display: flex;
  padding-block-start: map.get($language-list, 'item-padding', 'block-start');
  padding-block-end: map.get($language-list, 'item-padding', 'block-end');
  padding-inline-start: map.get($language-list, 'item-padding', 'inline-start');
  padding-inline-end: map.get($language-list, 'item-padding', 'inline-end');

  &:focus-visible {
    outline-offset: -2px;
  }

  &:hover {
    text-decoration: none;
  }
}

.ecl-site-header__language-link-code,
.ecl-site-header__custom-action-link-code {
  color: map.get($language-list, 'code-color');
  font: var(--f-m);
  font-weight: map.get($language-list, 'code-font-weight');
  display: inline-block;
  margin-inline-end: var(--s-2xs);
  text-transform: uppercase;
  width: map.get($language-list, 'code-width');
}

.ecl-site-header__language-link:hover .ecl-site-header__language-link-label,
.ecl-site-header__language-link:focus-visible
  .ecl-site-header__language-link-label {
  text-decoration: underline;
}

.ecl-site-header__language-link--active {
  background-color: map.get($language-list, 'item-active-background');
  border-inline-start-color: map.get(
    $language-list,
    'item-active-border-color'
  );
  color: map.get($language-list, 'item-active-color');

  &:visited {
    color: map.get($language-list, 'item-active-color');
  }

  .ecl-site-header__language-link-code {
    font-weight: map.get($language-list, 'code-active-font-weight');
  }
}

.ecl-site-header__language-link:hover.ecl-site-header__language-link--active {
  color: map.get($language-list, 'item-active-color');

  .ecl-site-header__language-link-label {
    text-decoration: none;
  }
}

@include breakpoints.up('m') {
  .ecl-site-header__language,
  .ecl-site-header__custom-action {
    position: relative;
  }

  .ecl-site-header__custom-action-overlay,
  .ecl-site-header__language-container {
    left: 50%;
    padding-block-start: map.get(
      $language-list,
      'container-padding-desktop',
      'block-start'
    );
    padding-block-end: map.get(
      $language-list,
      'container-padding-desktop',
      'block-end'
    );
    padding-inline-start: map.get(
      $language-list,
      'container-padding-desktop',
      'inline-start'
    );
    padding-inline-end: calc(
      #{map.get($language-list, 'container-padding-desktop', 'inline-end')} +
        #{map.get($language-list, 'item-active-border-width')}
    );
    right: auto;
    transform: translateX(-50%);
  }

  .ecl-site-header__custom-action-overlay {
    width: 400px;
  }

  .ecl-site-header__language-title,
  .ecl-site-header__custom-action-title {
    font: map.get($language-list, 'header-font-desktop');
  }

  // Horizontal position
  .ecl-site-header__language-container--push-right {
    left: auto;
    right: 0;
    transform: none;
  }

  .ecl-site-header__language-container--push-left {
    left: 0;
    right: auto;
    transform: none;
  }

  // Horizontal sections
  .ecl-site-header__language-content:not(
    .ecl-site-header__language-content--stack
  ) {
    flex-direction: row;
    margin-top: map.get($language-list, 'content-margin-desktop');

    .ecl-site-header__language-category {
      margin-top: 0;
    }

    .ecl-site-header__language-category:nth-child(2) {
      border-top: none;
      border-inline-start: map.get($language-list, 'category-separator');
      margin-inline-start: map.get($language-list, 'column-spacing-before');
      padding-inline-start: map.get($language-list, 'column-spacing-after');
    }

    .ecl-site-header__language-category-title {
      padding-top: 0;
    }
  }

  .ecl-site-header--rtl
    .ecl-site-header__language-content:not(
      .ecl-site-header__language-content--stack
    ) {
    overflow-x: hidden;
  }

  // Columns display
  .ecl-site-header__language-list {
    column-gap: 0;
  }

  .ecl-site-header__language-category--3-col .ecl-site-header__language-list {
    column-count: 3;
  }

  .ecl-site-header__language-category--2-col .ecl-site-header__language-list {
    column-count: 2;
  }

  .ecl-site-header__language-link {
    width: calc(#{map.get($language-list, 'item-width')} - (2 * var(--s-s)));
  }
}
