/* ---------------------------------------------------------------------------
 *
 * # Layout Styles
 *
 * This file contains our layout related styles.  These layouts are based on
 * EveryLayout and CUBE CSS.
 *
 * The goal is composable and reusable layouts styles.
 *
 * There will be scenarios where these classes may not cover the scenario your
 * solving for.  When we run into these scenarios, we can update these styles
 * with more custom built solutions.  Please document the reasons for deviating
 * when they occur.
 *
 * The layout classes provided here are:
 *
 *    * stack
 *    * sidebar
 *    * repel
 *    * wrapper
 *    * region
 *    * cover
 *    * center-xy
 *    * layout-center
 *    * box
 *    * box-modal
 *    * two columns
 *    * cluster
 *    * imposter
 *    * scrollable-container
 *    * row
 *    * column
 *    * utils
 *      * main
 *      * gap
 *      * gap-column
 *      * start
 *      * end
 *      * center
 *      * vertically-center
 *      * space-between
 *      * space-around
 *      * full-width
 *      * grow
 *      * text-center
 *      * justify-center
 *      * visually-hidden
 *
 * -------------------------------------------------------------------------*/


/* stack
 *
 * Space between items in a column.  Prefer this over the `region` when you
 * have items in a column which require uniform spacing e.g. list,
 * candidates, labels + input + list items etc
 *
 * sizes: stack:tight, stack:hug, stack
 * -------------------------------------------------------------------------*/
.stack,
.stack\:tight,
.stack\:hug {
  --space: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * + *,
.stack\:tight > * + *,
.stack\:hug > * + * {
  margin-top: var(--space);
}

.stack\:tight {
  --space: .5rem;
}

.stack\:hug {
  --space: .2rem;
}

/* sidebar
 *
 * Comes in two styles:
 *   - with-sidebar       - sidebar on the left
 *   - with-sidebar:right - sidebar on the right
 * -------------------------------------------------------------------------*/

.with-sidebar,
.with-sidebar\:right {
  --sidebar-basis: 24rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.with-sidebar > :first-child,
.with-sidebar\:right > :last-child {
  /* width of the sidebar */
  flex-basis: var(--sidebar-basis);
  flex-grow: 1;
}

.with-sidebar > :last-child,
.with-sidebar\:right > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

/* Row
 * -------------------------------------------------------------------------*/
.row {
  display: flex;
}

/* Column
 * -------------------------------------------------------------------------*/
.column {
  display: flex;
  flex-direction: column;
}


/* repel
 *
 * Layout two containers opposite of each other
 * -------------------------------------------------------------------------*/
.repel {
  display: flex;
  justify-content: space-between;
}

/* wrapper
 *
 * A wrapper provides horitizontal space to the right and left of an element.
 * Avoid using this to add vertical space.  For that, please see `region` or
 * `stack`.
 *
 * sizes: hug, tight, small, medium, large
 * -------------------------------------------------------------------------*/

.wrapper\:hug {
  padding-left: .5em;
  padding-right: .5em;
}

.wrapper\:tight {
  padding-left: 1em;
  padding-right: 1em;
}

.wrapper\:small {
  padding-left: 2em;
  padding-right: 2em;
}

.wrapper\:medium {
  padding-left: 4em;
  padding-right: 4em;
}

.wrapper\:large {
  padding-left: 8em;
  padding-right: 8em;
}

/* cover
 *
 * Vertically center an element.
 * -------------------------------------------------------------------------*/

.cover {
  --cover-min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  min-block-size: var(--cover-min-block-size);
  padding: 1rem;
}

/* @note use for screen with the project nav header and the top screen toolbar.
 *
 * @todo revisit this and see about removing this or coming up with a more
 * reusable approach. */
.cover\:60 {
  --cover-min-block-size: 60vh;
}

.cover > * {
  margin-block: 1rem;
}

.cover > :first-child:not(div) {
  margin-block-start: 0;
}

.cover > :last-child:not(div) {
  margin-block-end: 0;
}

.cover > div {
  margin-block: auto;
}

/* center-xy
 *
 * center child vertically and horizontally
 * -------------------------------------------------------------------------*/

.center-xy {
  display: flex;
}

.center-xy > *:only-child {
  margin: auto;
}

/* layout-center
 *
 * a layout component to center content horizontally.  This doesn't rely on
 * flex.
 *
 * @todo I should be named `.center`, but this conflicts with another class.
 * We should look into seeing if we can rename the other class.
 * -------------------------------------------------------------------------*/

.layout-center {
  --layout-center-max-width: 55em;
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: var(--layout-center-max-width);
}

/* region
 *
 * A region is used to space above and below an element.  For horizontal space,
 * please see `wrapper`
 *
 * sizes: hug, tight, small, medium
 * -------------------------------------------------------------------------*/
.region\:hug {
  padding-top: .5em;
  padding-bottom: .5em;
}

.region\:tight {
  padding-top: 1em;
  padding-bottom: 1em;
}

.region\:small {
  padding-top: 2em;
  padding-bottom: 2em;
}

.region\:medium {
  padding-top: 4em;
  padding-bottom: 4em;
}

/* two-column
 *
 * Layout two divs side-by-side as two equal columns.
 *
 * Both columns will take 50% of the available space.  However, when the second
 * column goes below 25% of the total available space it will collapse.  We
 * do this because it achieves responsive design without having to set media
 * queries which means easier to maintain CSS.
 * -------------------------------------------------------------------------*/
.two-column {
  display:flex;
  flex-wrap:wrap;
}

.two-column > * {
  flex: 1;
}

.two-column > :last-child {
  min-inline-size: 50%;
}

/* cluster
 *
 * Layout `n` components of varying length.  Think of it like a flex equivalent
 * of a "masonry" layout.  Example use cases:
 *   - Horizontal Nav Items
 *   - Text
 * -------------------------------------------------------------------------*/

.cluster,
.cluster-column {
  --cluster-space: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-space);
  justify-content: flex-start;
  align-items: flex-start;
}

.cluster-column {
  flex-direction: column;
}

/* Imposter
 *
 * Places content ontop of other content and correctly centers the layout.
 * Think: modal.
 * -------------------------------------------------------------------------*/
.imposter {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

.imposter.contain {
  --margin: 0px;
  overflow: auto;
  max-inline-size: calc(100% - (var(--margin) * 2));
  max-block-size: calc(100% - (var(--margin) * 2));
}


/* scrollable container
 * -------------------------------------------------------------------------*/

.vertical-scroll {
  --max-scroll-container-height: 16em;
  /* @note `auto` makes it so the scrollbar is hidden when the list isn't long
   * enough and visible when it is */
  overflow-y: auto;
  max-height: var(--max-scroll-container-height);
}


/* box
 *
 * Layout component which wraps the contents in a box.
 *
 * styles: box, dotted-box
 * -------------------------------------------------------------------------*/

.box {
  border: 1px solid var(--yas-blue-80);
  border-radius: 4px;
  box-shadow: 0px 4px 6px -2px rgba(15, 23, 42, 0.05),
  0px 10px 15px -3px rgba(15, 23, 42, 0.10),
  0px 0px 1px 0px rgba(15, 23, 42, 0.5);
}

.dotted-box {
  padding: .5em 0 .5em 0;
  border: 1px dotted black;
}

/* box-modal
 *
 * Layout component which wraps the contents in a box which has a border shadow
 *
 * styles: box-modal
 * -------------------------------------------------------------------------*/

.box-modal {
  background-color: var(--yas-white);
  border: 1px solid var(--yas-blue-80);
  border-radius: 8px;
  box-shadow: 0 3px 6px -4px #0000001f,0 6px 16px #00000014,0 9px 28px 8px #0000000d;
}

/* Utils
 * -------------------------------------------------------------------------*/

/* scrollable main area */
.main {
  display: flex;
  flex: 1;
  overflow: auto;
}

.gap\:tight {
  /* @note the clamp numbers can be modified - nothing special yet */
  gap: 0 clamp(.5rem,.5rem,.5rem);
}

.gap\:small {
  /* @note the clamp numbers can be modified - nothing special yet */
  gap: 0 clamp(1rem,1rem,1rem);
}

.gap\:medium {
  /* @note the clamp numbers can be modified - nothing special yet */
  gap: 0 clamp(4rem,4rem,4rem);
}

.gap-column\:small {
  gap: clamp(1rem,1rem,1rem) 0;
}

/* @todo I don't love that we apply flex here. Make me more composable. */
.full-width {
  display: flex;
  flex-basis: 100%;
}

.grow\:1 {
  flex: 1;
}

.grow\:2 {
  flex: 2;
}

.text-center {
  text-align: center;
}

.pre-wrap {
  white-space: pre-wrap;
}

/** @note added for scenarios, like the list-item, where we conditionally want
 * to hide the pointer cursor. **/
.no-cursor,
.no-cursor:hover {
  cursor: initial;
}

.z-index__1500 {
  z-index: 1500;
}

/* alignment */
.start {
  align-items: flex-start;
}

.end {
  justify-content: flex-end;
  align-items: flex-end;
}

.center {
  align-items: center;
}

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

/* @todo improve naming.  This is vertical based on the direction of flex. */
.vertical-center {
  justify-content: center;
}

.space-between {
  justify-content: space-between;
}

.space-around {
  justify-content: space-around;
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}