/*
 * CloudBeaver - Cloud Database Manager
 * Copyright (C) 2020-2024 DBeaver Corp and others
 *
 * Licensed under the Apache License, Version 2.0.
 * you may not use this file except in compliance with the License.
 */
.container {
  display: flex;
  flex-direction: row;
  align-content: baseline;
  position: relative;
  box-sizing: border-box;

  flex-wrap: wrap;
  flex: 1 1 100%;

  &.hideEmpty:empty {
    display: none;
  }

  &.vertical {
    flex-direction: column;
    align-content: stretch;

    & > * {
      flex-basis: 0 !important;
    }
    & > .keepSize {
      flex-basis: auto !important;
    }
  }

  &.baseline {
    align-items: baseline;
  }

  &.flexStart {
    align-items: flex-start;
  }

  &.flexEnd {
    align-items: flex-end;
  }

  &.center {
    align-items: center;
    justify-content: center;
    align-content: center;
  }

  &.wrap {
    flex-wrap: wrap;
  }

  &.overflow {
    overflow: auto;
  }

  &.parent {
    padding: 24px;

    &.compact {
      padding: 16px;
    }

    &.dense {
      padding: 8px;
    }
  }

  &.gap {
    gap: 24px;

    &.compact {
      gap: 16px;
    }

    &.dense {
      gap: 8px;
    }
  }

  &.grid {
    display: grid;

    &.tiny {
      grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
    }

    &.small {
      grid-template-columns: repeat(auto-fit, minmax(260px, max-content));
    }

    &.medium {
      grid-template-columns: repeat(auto-fit, minmax(460px, max-content));
    }

    &.large {
      grid-template-columns: repeat(auto-fit, minmax(800px, max-content));
    }

    /* increase css specificity */
    &:nth-child(n) {
      flex-basis: unset;
      max-width: unset;
    }
  }

  & > * {
    flex: 1 1 100%;
  }

  &.noWrap {
    flex-wrap: nowrap;
  }
}
