/**
 * Splash page print
 * @define splash-page
 */

@use 'sass:map';

// Exposed variables
$theme: null !default;
$splash-page: null !default;
$splash-page-print: null !default;
$language-list: null !default;
$language-list-print: null !default;

// Logo
.ecl-splash-page__logo-container {
  background-color: map.get($splash-page, 'logo-background');

  .ecl-container {
    padding: map.get($splash-page-print, 'logo-padding');
  }
}

.ecl-splash-page__picture {
  display: inline-block;
}

.ecl-splash-page__logo-image {
  display: block;
  height: map.get($splash-page, 'logo-height-desktop');
}

// Language list
.ecl-splash-page__language-container {
  color: map.get($language-list, 'color');
  font: map.get($theme, 'font-print', 'm');
  padding-block-start: map.get(
    $language-list-print,
    'container-padding-desktop',
    'block-start'
  );
  padding-block-end: map.get(
    $language-list-print,
    'container-padding-desktop',
    'block-end'
  );
  padding-inline-start: map.get(
    $language-list-print,
    'container-padding-desktop',
    'inline-start'
  );
  padding-inline-end: calc(
    #{map.get(
        $language-list-print,
        'container-padding-desktop',
        'inline-end'
      )} +
      #{map.get($language-list, 'item-active-border-width')}
  );
}

.ecl-splash-page__language-title {
  font: map.get($language-list-print, 'header-font-desktop');
  margin: 0;
}

.ecl-splash-page__language-content {
  display: flex;
  flex-direction: column;
  margin-top: map.get($language-list-print, 'content-margin-desktop');
}

.ecl-splash-page__language-category-title {
  font: map.get($language-list-print, '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: 0;
  padding-inline-end: 0;
  margin: 0;
}

.ecl-splash-page__language-category:first-child {
  .ecl-splash-page__language-category-title {
    padding-top: 0;
  }
}

.ecl-splash-page__language-category:nth-child(2) {
  border-top: map.get($language-list, 'category-separator');
  margin-top: map.get($theme, 'spacing-print', 's');
}

.ecl-splash-page__language-list {
  list-style: none;
  margin: 0 0 0 -#{map.get($theme, 'spacing-print', 's')};
  padding: 0;
}

.ecl-splash-page__language-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-print,
    'item-padding',
    'block-start'
  );
  padding-block-end: map.get($language-list-print, 'item-padding', 'block-end');
  padding-inline-start: map.get(
    $language-list-print,
    'item-padding',
    'inline-start'
  );
  padding-inline-end: map.get(
    $language-list-print,
    'item-padding',
    'inline-end'
  );

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

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

.ecl-splash-page__language-link-code {
  color: map.get($language-list, 'code-color');
  font: map.get($theme, 'font-print', 'm');
  font-weight: map.get($language-list, 'code-font-weight');
  display: inline-block;
  margin-inline-end: map.get($theme, 'spacing-print', '2xs');
  text-transform: uppercase;
  width: map.get($language-list, 'code-width');
}

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

.ecl-splash-page__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');

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

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

  .ecl-splash-page__language-link-label {
    text-decoration: none;
  }
}
