@charset "UTF-8";
/* Box */

/*
Boxes are a type of view that create distinct, logical groupings of controls, text fields, and other interface elements.
For example, the content of a popup or popout may appear in a box. A box consists of a head area, a body area and a foot area.
The head area may show a title and general controls — for example to close the popup.
The body area lets the user view and interact with content. It is scrollable.
The foot area may provide further information or interaction with the body's content — for example page numbers and page controls.
The foot area is optional.

Use the .{box}--content class for padding if needed.
*/

// Prefixes and objects:
// .box-

@box-color: #ccc;
@box-backgroundColor: lighten(@box-color,20%);
@box-bottomSpace: @bottomSpace;
@box-innerSpace: @innerSpace;
@box-borderColor: @box-color;
@box-borderWidth: @defaultBorderWidth;
@box-borderRadius: @defaultBorderRadius;
@box-shadow: @defaultShadow;
@box-shadowColor: @defaultShadowColor;

.genericBox(
    @color:@box-color,
    @backgroundColor: @box-backgroundColor,
    @bottomSpace: @box-bottomSpace,
    @innerSpace: @box-innerSpace,
    @borderColor: @box-borderColor,
    @borderWidth: @box-borderWidth,
    @borderRadius: @box-borderRadius,
    @shadow: @box-shadow,
    @shadowColor: @box-shadowColor) {
  display: flex;
  min-height: 0;
  max-height: 100%;
  flex-direction: column;
  background-color: @backgroundColor;
  .border-radius(@borderRadius);
  .border(@borderWidth, solid, @borderColor);
  .boxShadow(@shadow, @shadowColor);
  &-head {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background-color: lighten(@color, 15%);
    .border(@borderWidth, solid, @color);
    margin: -@borderWidth -@borderWidth 0 -@borderWidth;
    border-top-left-radius: @borderRadius;
    border-top-right-radius: @borderRadius;
    & > *:first-child {
      border-top-left-radius: @borderRadius;
      border-top-right-radius: @borderRadius;
    }
  }
  &-body {
    overflow-y: auto;
    overflow-x: hidden;
  }
  &-foot:not(:empty) {
    .zIndex('content', 1);
    margin-top: -@borderWidth;
    border-top: @borderWidth solid @color;
    flex-shrink: 0;
    border-bottom-left-radius: @borderRadius;
    border-bottom-right-radius: @borderRadius;
  }
  &--content {
    padding: @innerSpace;
  }
  &--content-wide {
    padding: @innerSpace*2;
  }
}

.colorizeBox(
    @color: @box-color,
    @backgroundColor: @box-backgroundColor,
    @borderColor: @box-borderColor,
    @shadow: @defaultShadow,
    @shadowColor: @defaultShadowColor) {
  background-color: @backgroundColor;
  border-color: @borderColor;
  .boxShadow(@shadow, @shadowColor);
  & .box-head {
    background-color: lighten(@color, 20%);
    border-color: @borderColor;
  }
  & .box-foot:not(:empty) {
    border-top-color: @borderColor;
  }
}
