@import 'variables.less';

.ra-control-container {
  font:
    12px/1.5 'Helvetica Neue',
    Arial,
    Helvetica,
    sans-serif;

  .ra-control {
    position: relative;
    z-index: @ra-control-z-index;
    float: left;
    clear: both;
    color: @ra-control-font-color;
    font-size: @ra-control-font-size;
    pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
    pointer-events: auto;

    &.ra-control--hide {
      display: none;
    }
  }

  each(@position-list,{
    .ra-@{value} {
        @{value}: 0;
      display: flex;
      position: absolute;
      z-index: @ra-control-z-index;
      pointer-events: none;
      .ra-control:not(.ra-control--hide) {
        margin-@{value}: @ra-control-space;
      }
    }
  });

  .ra-center {
    position: absolute;
    display: flex;
    justify-content: center;
    &.ra-top,
    &.ra-bottom {
      width: 100%;
    }
    &.ra-left,
    &.ra-right {
      height: 100%;
    }
    .ra-control {
      margin-right: @ra-control-space;
      margin-bottom: @ra-control-space;
    }
  }

  .ra-row {
    flex-direction: row;
    &.ra-top {
      align-items: flex-start;
    }
    &.ra-bottom {
      align-items: flex-end;
    }
  }

  .ra-column {
    flex-direction: column;
    &.ra-left {
      align-items: flex-start;
    }
    &.ra-right {
      align-items: flex-end;
    }
  }
}