@import 'variables';

.ra-popper {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  color: @ra-control-font-color;
  &.ra-popper-hide {
    display: none;
  }
  .ra-popper-content {
    min-height: @ra-btn-control-size;
    background: @ra-popper-control-bg-color;
    border-radius: @ra-btn-control-border-radius;
    box-shadow: @ra-control-shadow;
  }
  .ra-popper-arrow {
    width: 0;
    height: 0;
    border-width: @ra-popper-control-arrow-size;
    border-style: solid;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    box-shadow: @ra-control-shadow;
  }
  &.ra-popper-left {
    flex-direction: row;
    .ra-popper-arrow {
      border-left-color: @ra-popper-control-bg-color;
      margin: (@ra-btn-control-size / 2 - @ra-popper-control-arrow-size) 0;
    }
  }
  &.ra-popper-right {
    flex-direction: row-reverse;
    .ra-popper-arrow {
      border-right-color: @ra-popper-control-bg-color;
      margin: (@ra-btn-control-size / 2 - @ra-popper-control-arrow-size) 0;
    }
  }
  &.ra-popper-top {
    flex-direction: column;
    .ra-popper-arrow {
      border-top-color: @ra-popper-control-bg-color;
      margin: 0 (@ra-btn-control-size / 2 - @ra-popper-control-arrow-size);
    }
  }
  &.ra-popper-bottom {
    flex-direction: column-reverse;
    .ra-popper-arrow {
      border-bottom-color: @ra-popper-control-bg-color;
      margin: 0 (@ra-btn-control-size / 2 - @ra-popper-control-arrow-size);
    }
  }
  &.ra-popper-start {
    align-items: flex-start;
  }
  &.ra-popper-end {
    align-items: flex-end;
  }
}