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

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

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

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

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

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

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

@include breakpoints.up('m') {
  .ecl-splash-page__logo-image {
    height: map.get($splash-page, 'logo-height-desktop');
  }
}

// Language list
.ecl-splash-page__language-container {
  color: map.get($language-list, 'color');
  font: var(--f-m);
  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')}
  );
}

.ecl-splash-page__language-title {
  font: map.get($language-list, 'header-font-mobile');
  margin: 0;
  padding-inline-start: calc(
    #{map.get($language-list, 'title-padding-start')} +
      #{map.get($language-list, 'item-active-border-width')}
  );
}

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

.ecl-splash-page__language-category {
  flex-grow: 1;
}

.ecl-splash-page__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'
  );
  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($language-list, 'category-stack-margin');
}

.ecl-splash-page__language-list {
  list-style: none;
  margin: 0;
  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, '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-splash-page__language-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-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;
  }
}

@include breakpoints.up('m') {
  .ecl-splash-page__language-container {
    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')}
    );
  }

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

  // Columns display
  .ecl-splash-page__language-list {
    column-gap: 0;
  }

  .ecl-splash-page__language-category .ecl-splash-page__language-list {
    column-count: 3;
  }

  .ecl-splash-page__language-four-item-category
    .ecl-splash-page__language-list {
    display: grid;
  }

  .ecl-splash-page__language-two-item-category {
    flex-grow: 0;

    .ecl-splash-page__language-list {
      display: grid;
      grid-template-columns: repeat(2, 33%);
    }
  }

  .ecl-splash-page__language-single-item-category {
    flex-grow: 0;

    + .ecl-splash-page__language-category {
      flex-grow: 0;
    }

    .ecl-splash-page__language-list {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
    }
  }

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

@include breakpoints.up('l') {
  .ecl-splash-page__language-two-item-category .ecl-splash-page__language-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .ecl-splash-page__language-four-item-category
    .ecl-splash-page__language-list {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .ecl-splash-page__language-category
    + .ecl-splash-page__language-category
    .ecl-splash-page__language-list {
    column-count: 2;
  }

  // Horizontal sections
  .ecl-splash-page__language-content:not(
    .ecl-splash-page__language-content--stack
  ) {
    flex-direction: row;

    .ecl-splash-page__language-category {
      margin-top: 0;
    }

    .ecl-splash-page__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-splash-page__language-category-title {
      padding-top: 0;
    }
  }
}
