// Name:            Position
// Description:     Utilities to position content
//
// Component:       `ui-position-absolute`
//                  `ui-position-relative`
//                  `ui-position-z-index`
//                  `ui-position-top`
//                  `ui-position-bottom`
//                  `ui-position-left`
//                  `ui-position-right`
//                  `ui-position-top-left`
//                  `ui-position-top-center`
//                  `ui-position-top-right`
//                  `ui-position-bottom-left`
//                  `ui-position-bottom-center`
//                  `ui-position-bottom-right`
//                  `ui-position-center`
//                  `ui-position-center-left`
//                  `ui-position-center-right`
//                  `ui-position-cover`
//
// Modifiers:       `ui-position-small`
//                  `ui-position-medium`
//                  `ui-position-large`
//
// ========================================================================


// Variables
// ========================================================================

@position-small-margin:                                @global-small-gutter;
@position-medium-margin:                               @global-gutter;
@position-large-margin:                                @global-gutter;
@position-large-margin-l:                              50px;


/* ========================================================================
   Component: Position
 ========================================================================== */


/* Directions
 ========================================================================== */

[class*='ui-position-top'],
[class*='ui-position-bottom'],
[class*='ui-position-left'],
[class*='ui-position-right'],
[class*='ui-position-center'] { position: absolute !important; }


/* Edges
 ========================================================================== */

/* Don't use `width: 100%` because it is wrong if the parent has padding. */
.ui-position-top {
  top: 0;
  left: 0;
  right: 0;
}

.ui-position-bottom {
  bottom: 0;
  left: 0;
  right: 0;
}

.ui-position-left {
  top: 0;
  bottom: 0;
  left: 0;
}

.ui-position-right {
  top: 0;
  bottom: 0;
  right: 0;
}


/* Corners
 ========================================================================== */

.ui-position-top-left {
  top: 0;
  left: 0;
}

.ui-position-top-right {
  top: 0;
  right: 0;
}

.ui-position-bottom-left {
  bottom: 0;
  left: 0;
}

.ui-position-bottom-right {
  bottom: 0;
  right: 0;
}

/*
 * Center
 * 1. Fix text wrapping if content is larger than 50% of the container.
 */

.ui-position-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  /* 1 */
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
}

/* Vertical */
[class*='ui-position-center-left'],
[class*='ui-position-center-right'] {
  top: 50%;
  transform: translateY(-50%);
}

.ui-position-center-left { left: 0; }
.ui-position-center-right { right: 0; }

.ui-position-center-left-out {
  right: 100%;
  width: -moz-max-content;
  width: max-content;
}

.ui-position-center-right-out {
  left: 100%;
  width: -moz-max-content;
  width: max-content;
}

/* Horizontal */
.ui-position-top-center,
.ui-position-bottom-center {
  left: 50%;
  transform: translateX(-50%);
  /* 1 */
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
}

.ui-position-top-center { top: 0; }
.ui-position-bottom-center { bottom: 0; }


/* Cover
 ========================================================================== */

.ui-position-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}


/* Utility
 ========================================================================== */

.ui-position-relative { position: relative !important; }

.ui-position-absolute { position: absolute !important; }

.ui-position-fixed { position: fixed !important; }

.ui-position-z-index { z-index: 1; }


/* Margin modifier
 ========================================================================== */

/*
 * Small
 */

.ui-position-small {
  max-width: ~'calc(100% - (@{position-small-margin} * 2))';
  margin: @position-small-margin;
}

.ui-position-small.ui-position-center { transform: translate(-50%, -50%) translate(-@position-small-margin, -@position-small-margin); }

.ui-position-small[class*='ui-position-center-left'],
.ui-position-small[class*='ui-position-center-right'] { transform: translateY(-50%) translateY(-@position-small-margin); }

.ui-position-small.ui-position-top-center,
.ui-position-small.ui-position-bottom-center { transform: translateX(-50%) translateX(-@position-small-margin); }

/*
 * Medium
 */

.ui-position-medium {
  max-width: ~'calc(100% - (@{position-medium-margin} * 2))';
  margin: @position-medium-margin;
}

.ui-position-medium.ui-position-center { transform: translate(-50%, -50%) translate(-@position-medium-margin, -@position-medium-margin); }

.ui-position-medium[class*='ui-position-center-left'],
.ui-position-medium[class*='ui-position-center-right'] { transform: translateY(-50%) translateY(-@position-medium-margin); }

.ui-position-medium.ui-position-top-center,
.ui-position-medium.ui-position-bottom-center { transform: translateX(-50%) translateX(-@position-medium-margin); }

/*
 * Large
 */

.ui-position-large {
  max-width: ~'calc(100% - (@{position-large-margin} * 2))';
  margin: @position-large-margin;
}

.ui-position-large.ui-position-center { transform: translate(-50%, -50%) translate(-@position-large-margin, -@position-large-margin); }

.ui-position-large[class*='ui-position-center-left'],
.ui-position-large[class*='ui-position-center-right'] { transform: translateY(-50%) translateY(-@position-large-margin); }

.ui-position-large.ui-position-top-center,
.ui-position-large.ui-position-bottom-center { transform: translateX(-50%) translateX(-@position-large-margin); }

/* Desktop and bigger */
@media (min-width: @breakpoint-large) {

  .ui-position-large {
    max-width: ~'calc(100% - (@{position-large-margin-l} * 2))';
    margin: @position-large-margin-l;
  }

  .ui-position-large.ui-position-center { transform: translate(-50%, -50%) translate(-@position-large-margin-l, -@position-large-margin-l); }

  .ui-position-large[class*='ui-position-center-left'],
  .ui-position-large[class*='ui-position-center-right'] { transform: translateY(-50%) translateY(-@position-large-margin-l); }

  .ui-position-large.ui-position-top-center,
  .ui-position-large.ui-position-bottom-center { transform: translateX(-50%) translateX(-@position-large-margin-l); }

}


// Hooks
// ========================================================================

.hook-position-misc;

.hook-position-misc() {}