/**
 * Popover
 * @define popover
 */

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

// Exposed variables
$theme: null !default;
$popover: null !default;

// Internal variables
$_arrow-size: 1rem;

.ecl-popover {
  display: inline-block;
  margin: 0;
  position: relative;
}

.ecl-popover__container {
  background-color: map.get($theme, 'color', 'white');
  box-shadow: map.get($popover, 'shadow');
  min-height: 7rem;
  position: absolute;
  transform: translateX(-50%);
  z-index: map.get($theme, 'z-index', 'dropdown');

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

.ecl-popover__scrollable {
  min-width: 288px;
  max-width: 288px;
  overflow-y: auto;
  padding: map.get($popover, 'padding');
}

.ecl-popover__content {
  background-color: map.get($theme, 'color', 'white');
  color: var(--c-d);
  font: var(--f-m);
  line-height: map.get($popover, 'content-line-height');
  max-height: 11rem;
  text-align: start;
  width: auto;
}

.ecl-popover__close {
  position: absolute;
  top: map.get($popover, 'close-button-top');
  right: map.get($popover, 'close-button-right');

  + .ecl-popover__content {
    padding-inline-end: map.get($popover, 'content-padding-end');
  }
}

[dir='rtl'] .ecl-popover__close {
  left: var(--s-m);
  right: auto;
}

.ecl-popover--bottom .ecl-popover__container,
.ecl-popover--top .ecl-popover__container {
  left: 50%;
}

.ecl-popover--bottom .ecl-popover__container {
  top: calc(100% + var(--s-s));

  &::before {
    top: 1px;
  }
}

// Top Popover
.ecl-popover--top .ecl-popover__container {
  bottom: calc(100% + var(--s-s));
  margin-top: 0;

  &::before {
    bottom: 0;
    top: auto;
    transform: translate(0%, 50%) rotate(135deg);
  }
}

.ecl-popover--right .ecl-popover__container {
  left: calc(100% + var(--s-s) + var(--s-2xs));
  transform: translateY(-50%);
  top: 50%;

  &::before {
    top: var(--ecl-popover-position, 50%);
    left: 0;
    transform: translate(0%, -50%) rotate(225deg);
  }
}

.ecl-popover--left .ecl-popover__container {
  right: calc(100% + var(--s-s) + var(--s-2xs));
  transform: translateY(-50%);
  top: 50%;

  .ecl-popover__scrollable {
    direction: rtl;

    .ecl-popover__content {
      direction: ltr;
    }
  }

  &::before {
    top: var(--ecl-popover-position, 50%);
    left: 100%;
    margin-left: -1px;
    transform: translate(-50%, -50%) rotate(45deg);
  }
}

.ecl-popover--push-bottom .ecl-popover__container {
  bottom: 0;
  top: auto;
  transform: none;
}

.ecl-popover--push-top .ecl-popover__container {
  bottom: auto;
  top: 0;
  transform: none;
}

// Horizontal arrow position
.ecl-popover--push-left .ecl-popover__container {
  left: 0;
  transform: none;

  &::before {
    left: var(--ecl-popover-position);
    right: auto;
  }
}

.ecl-popover--push-right .ecl-popover__container {
  left: auto;
  right: 0;
  transform: none;

  &::before {
    right: var(--ecl-popover-position);
    left: auto;
  }
}

@include breakpoints.up('s') {
  .ecl-popover__scrollable {
    max-width: 400px;
  }
}

@include breakpoints.up('m') {
  .ecl-popover__content {
    max-height: 264px;
  }

  .ecl-popover__scrollable {
    max-width: 522px;
  }
}

@include breakpoints.up('l') {
  .ecl-popover__scrollable {
    max-width: 648px;
  }
}

// Supporting the markup used in v3 for the other social media.
.ecl-popover__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 188px;
}

.ecl-popover__link {
  align-items: center;
  display: flex;
  padding: var(--s-s);

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