/*
 * Copyright (c) 2018 Eclipse Foundation, Inc.
 * 
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 * 
 * Contributors:
 *   Christopher Guindon <chris.guindon@eclipse-foundation.org>
 *   Zhou Fang <zhou.fang@eclipse-foundation.org>
 * 
 * SPDX-License-Identifier: EPL-2.0
*/

// Classes styles: Flex
// css classes for Flex layout.

.display-flex {
  display: flex;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.gap-10 {
  gap: 10px;
}
.gap-20 {
  gap: 20px;
}
.gap-30 {
  gap: 30px;
}
.gap-40 {
  gap: 40px;
}
.gap-50 {
  gap: 50px;
}
.gap-60 {
  gap: 60px;
}

@media (min-width: @screen-md-min) {
  .vertical-align-md {
    .vertical-align;
  }
}

.flex-column {
  display: flex;
  flex-direction: column;

  .flex-grow {
    flex-grow: 1;
  }
}

.flex-wrap {
  flex-wrap: wrap;
}

@media (max-width: @screen-xs-max) {
  .flex-column-mobile {
    flex-direction: column;
  }
}

.flex-justify-center {
  display: flex;
  justify-content: center;
}

.flex-align-center {
  display: flex;
  align-content: center;
}