@import '../../global';
@import '../../mixins/typography';

.popover {
  &_wrapper {
    @include small;

    position: relative;

    margin: 0;

    padding: $padding $padding-lg;

    min-width: 125px;
    max-width: 250px;

    z-index: 99;

    background-color: color('white');

    border: 1px solid;
    border-color: color('gray');
    border-radius: $border-radius;

    &::after {
      border: solid transparent;
      content: ' ';
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-color: transparent;
      border-width: 6px;
    }

    &[data-placement='bottom'] {
      &::after {
        left: 50%;
        bottom: 100%;
        border-bottom-color: color('white');
      }
    }

    &[data-placement='top'] {
      &::after {
        left: 50%;
        top: 100%;
        border-top-color: color('white');
      }
    }

    &[data-placement='left'] {
      &::after {
        left: 100%;
        top: 50%;
        border-left-color: color('white');
      }
    }

    &[data-placement='right'] {
      &::after {
        right: 100%;
        top: 50%;
        border-right-color: color('white');
      }
    }

    &_closeable {
      display: flex;
      justify-content: flex-end;
    }
  }
}