@import 'libs/styles/src/variables/colors';
@import 'libs/styles/src/mixins/list';
@import 'libs/styles/src/variables/gutters';
@import 'libs/styles/src/variables/shadows';
@import 'libs/styles/src/variables/z-index';

.popover {
  margin-left: var(--digi--layout--gutter);
  vertical-align: middle;
  display: inline-block;

  &__button {
    background-color: transparent;
    color: var(--digi--typography--color--link);
    font-size: var(--digi--typography--font-size--desktop);
    border-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      color: var(--digi--typography--color--link--active);
    }
  }
  &__button-text {
    margin-left: var(--digi--layout--gutter--s);
  }

  &__overlay-content {
    max-width: var(--digi--typography--text--max-width);
    padding: var(--digi--layout--padding--50) var(--digi--layout--padding--20) var(--digi--layout--padding--30);
  }

  &__close-button {
    position: absolute;
    top: var(--digi--layout--gutter);
    right: var(--digi--layout--gutter--s);
    background: transparent;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &__close-button-text {
    font-size: var(--digi--typography--font-size--s);
  }

  &__container-arrow {
    width: u(6);
    height: u(6);
    position: absolute;
    bottom: 100%;
    right: 50%;
    z-index: $msfa__z-index-popover;
    overflow: hidden;
    &:after {
      content: '';
      position: absolute;
      background: #fff;
      border-width: u(3);
      border-style: solid;
      border-color: transparent #fff #fff;
      right: 50%;
      overflow: hidden;
      transform: rotate(45deg);
      box-shadow: 0 0 u(0.7) u(0.7) rgb(0 0 0 / 30%);
    }
  }
}
