@import url('variables.less');

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

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

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

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

  .l7-center {
    position: absolute;
    display: flex;
    justify-content: center;

    &.l7-top,
    &.l7-bottom {
      width: 100%;
    }

    &.l7-left,
    &.l7-right {
      height: 100%;
    }

    .l7-control {
      margin-right: @l7-control-space;
      margin-bottom: @l7-control-space;
    }
  }

  .l7-row {
    flex-direction: row;

    &.l7-top {
      align-items: flex-start;
    }

    &.l7-bottom {
      align-items: flex-end;
    }
  }

  .l7-column {
    flex-direction: column;

    &.l7-left {
      align-items: flex-start;
    }

    &.l7-right {
      align-items: flex-end;
    }
  }
}