/// Utility classes
///
/// Pattern strategies:
///
///     [ ] "!important" keyword → «using a sledgehammer to hit a nail
///         in the wall»
///     [x] rule precedence based on higher selector (ie. "#id")
///     [ ] adding an extra cascade layer → not fully browser compliant
///
///
/// @https://sebastiandedeyne.com/why-we-use-important-with-tailwind/
/// @https://css-tricks.com/css-cascade-layers/

#app,
#portal {

  /// Width
  $widths:
    auto,
    inherit,
    min-content,
    max-content,
    fit-content;

  @each $value in $widths {
    .w-#{$value} { width: $value; }
  }

  @for $i from 0 through 10 {
    .w-#{$i} { width: space-x($i) }
  }

  .w-0        { width: 0;           }
  .w-fluid,
  .w-100      { width: 100%;        }

  .w-1\/2	    { width: 50%;         }
  .w-1\/3	    { width: 33.333333%;  }
  .w-2\/3	    { width: 66.666667%;  }
  .w-1\/4	    { width: 25%;         }
  .w-2\/4	    { width: 50%;         }
  .w-3\/4	    { width: 75%;         }
  .w-1\/5	    { width: 20%;         }
  .w-2\/5	    { width: 40%;         }
  .w-3\/5	    { width: 60%;         }
  .w-4\/5	    { width: 80%;         }
  .w-1\/6	    { width: 16.666667%;  }
  .w-2\/6  	  { width: 33.333333%;  }
  .w-3\/6	    { width: 50%;         }
  .w-4\/6	    { width: 66.666667%;  }
  .w-5\/6	    { width: 83.333333%;  }
  .w-1\/12	  { width: 8.333333%;   }
  .w-2\/12	  { width: 16.666667%;  }
  .w-3\/12	  { width: 25%;         }
  .w-4\/12	  { width: 33.333333%;  }
  .w-5\/12	  { width: 41.666667%;  }
  .w-6\/12	  { width: 50%;         }
  .w-7\/12	  { width: 58.333333%;  }
  .w-8\/12	  { width: 66.666667%;  }
  .w-9\/12	  { width: 75%;         }
  .w-10\/12	  { width: 83.333333%;  }
  .w-11\/12	  { width: 91.666667%;  }

  .min-w-25   { min-width: 25%      }
  .min-w-33   { min-width: 33%      }
  .min-w-50   { min-width: 50%      }
  .min-w-75   { min-width: 75%      }
  .min-w-100  { min-width: 100%     }

  /// Height
  .h-auto     { height: auto;     }
  .h-fluid,
  .h-100      { height: 100%;     }
  .h-inherit  { height: inherit;  }

  @for $i from 0 through 10 {
    .h-#{$i} { height: space-x($i) }
  }


  /// Margin
  .ml-auto, .mx-auto { margin-left: auto;  }
  .mr-auto, .mx-auto { margin-right: auto; }

  @for $i from 0 through 10 {
    .m-#{$i}   { margin: space-x($i);                                          }

    .mt-#{$i}  { margin-top:     space-x($i);                                  }
    .mr-#{$i}  { margin-right:   space-x($i);                                  }
    .mb-#{$i}  { margin-bottom:  space-x($i);                                  }
    .ml-#{$i}  { margin-left:    space-x($i);                                  }
    .mx-#{$i}  { margin-left:    space-x($i);  margin-right:   space-x($i);    }
    .my-#{$i}  { margin-top:     space-x($i);  margin-bottom:  space-x($i);    }


    .m-#{$i}\.5   { margin: space-x($i + .5);                                  }

    .mt-#{$i}\.5  { margin-top:     space-x($i + .5);                          }
    .mr-#{$i}\.5  { margin-right:   space-x($i + .5);                          }
    .mb-#{$i}\.5  { margin-bottom:  space-x($i + .5);                          }
    .ml-#{$i}\.5  { margin-left:    space-x($i + .5);                          }
    .mx-#{$i}\.5  { margin-left:    space-x($i + .5);
                    margin-right:   space-x($i + .5);                          }
    .my-#{$i}\.5  { margin-top:     space-x($i + .5);
                    margin-bottom:  space-x($i + .5);                          }
  }

  /// Padding
  @for $i from 0 through 10 {
    .p-#{$i}   { padding: space-x($i);                                         }

    .pt-#{$i}  { padding-top:     space-x($i);                                 }
    .pr-#{$i}  { padding-right:   space-x($i);                                 }
    .pb-#{$i}  { padding-bottom:  space-x($i);                                 }
    .pl-#{$i}  { padding-left:    space-x($i);                                 }
    .px-#{$i}  { padding-left:    space-x($i);  padding-right:   space-x($i);  }
    .py-#{$i}  { padding-top:     space-x($i);  padding-bottom:  space-x($i);  }
  }

  /// Display
  $displays:
    none,
    inline,
    inline-block,
    block,
    table,
    table-row,
    table-cell,
    flex,
    inline-flex;

  @each $value in $displays {
    .d-#{$value} { display: $value; }
  }

  /// Position
  $positions:
    static,
    relative,
    absolute,
    fixed,
    sticky;

  @each $value in $positions {
    .position-#{$value} { position: $value; }
  }

  /// Placement
  $placements:
    top,
    right,
    bottom,
    left;

  @each $value in $placements {
    .#{$value}-0 { #{$value}: 0; }
  }

  // Overflow
  $overflows: auto, hidden;

  @each $value in $overflows {
    .overflow-#{$value} { overflow: $value; }
  }

  /// Typography
  .text-bold      { font-weight: bold;          }
  .text-italic    { font-style: italic;         }

  .text-justify  { text-align: justify; }
  .text-wrap     { white-space: normal; }
  .text-nowrap   { white-space: nowrap; }
  .text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .text-left   { text-align: left;    }
  .text-right  { text-align: right;   }
  .text-center { text-align: center;  }

  .text-lowercase  { text-transform: lowercase;   }
  .text-uppercase  { text-transform: uppercase;   }
  .text-capitalize { text-transform: capitalize;  }

  .text-decoration-none       { text-decoration: none;      }
  .text-decoration-underline  { text-decoration: underline; }

  /// Font-size
  @for $unit from 1 through 40 {
    .font-size-#{$unit * 5} { font-size: #{$unit * 5%}; }
  }

  /// Line-height
  $line-heights:
    normal,
    inherit;

  @each $value in $line-heights {
    .line-height-#{$value} { line-height: normal; }
  }

  @for $unit from 1 through 20 {
    .line-height-#{$unit + 0} { line-height: #{$unit * + 0}; }
  }

  /// Vertical Alignment
  $vertical-aligns:
    baseline,
    top,
    middle,
    bottom,
    text-bottom,
    text-top;

  @each $value in $vertical-aligns {
    .vertical-align-#{$value} { vertical-align: $value; }
  }

  /// Color (keep ".text" classes for Bootstrap legacy)
  .text-white, .color-white { color: $white; }
  .text-black, .color-black { color: $black; }

  @each $theme, $value in $palette-semantic {
    .text-#{$theme}, .color-#{$theme} { color: $value; }
  }

  @each $theme, $value in $palette-gray {
    .text-gray-#{$theme}, .color-gray-#{$theme} { color: $value; }
  }

  @each $theme, $value in $palette-pastel {
    .text-pastel-#{$theme}, .color-pastel-#{$theme} { color: $value; }
  }

  /// Background
  .bg-white          { background-color: $white;      }
  .bg-black          { background-color: $black;      }
  .bg-transparent    { background-color: transparent; }

  @each $theme, $value in $palette-semantic {
    .bg-#{$theme} { background-color: $value; }
  }

  @each $theme, $value in $palette-gray {
    .bg-gray-#{$theme} { background-color: $value; }
  }
  @each $theme, $value in $palette-pastel {
    .bg-pastel-#{$theme} { background-color: $value; }
  }

  /// Border
  .border-0        { border: 0;         }
  .border-top-0    { border-top: 0;     }
  .border-right-0  { border-right: 0;   }
  .border-bottom-0 { border-bottom: 0;  }
  .border-left-0   { border-left: 0;    }

  @each $theme, $value in $palette-semantic {
    .border-#{$theme} { border-color: $value;}
  }

  @each $theme, $value in $palette-gray {
    .border-gray-#{$theme} { border-color: $value;}
  }
  @each $theme, $value in $palette-pastel {
    .border-pastel-#{$theme} { border-color: $value;}
  }

  /// Border radius
  .rounded-circle   { border-radius: 50%; }
  .rounded-0        { border-radius: 0;   }

  /// Clearfix
  .clearfix       { @include clearfix; }

  /// Flex
  .flex-row            { flex-direction: row;             }
  .flex-column         { flex-direction: column;          }
  .flex-row-reverse    { flex-direction: row-reverse;     }
  .flex-column-reverse { flex-direction: column-reverse;  }

  .flex-wrap         { flex-wrap: wrap;         }
  .flex-nowrap       { flex-wrap: nowrap;       }
  .flex-wrap-reverse { flex-wrap: wrap-reverse; }
  .flex-fill         { flex: 1 1 auto;          }
  .flex-grow-0       { flex-grow: 0;            }
  .flex-grow-1       { flex-grow: 1;            }
  .flex-shrink-0     { flex-shrink: 0;          }
  .flex-shrink-1     { flex-shrink: 1;          }

  .justify-content-start          { justify-content: start;           }
  .justify-content-end            { justify-content: end;             }
  .justify-content-flex-start     { justify-content: flex-start;      }
  .justify-content-flex-end       { justify-content: flex-end;        }
  .justify-content-center         { justify-content: center;          }
  .justify-content-space-between  { justify-content: space-between;   }
  .justify-content-space-around   { justify-content: space-around;    }

  .align-items-start              { align-items: start;               }
  .align-items-end                { align-items: end;                 }
  .align-items-flex-start         { align-items: flex-start;          }
  .align-items-flex-end           { align-items: flex-end;            }
  .align-items-center             { align-items: center;              }
  .align-items-baseline           { align-items: baseline;            }
  .align-items-stretch            { align-items: stretch;             }

  .align-content-start            { align-content: start;             }
  .align-content-end              { align-content: end;               }
  .align-content-flex-start       { align-content: flex-start;        }
  .align-content-flex-end         { align-content: flex-end;          }
  .align-content-center           { align-content: center;            }
  .align-content-stretch          { align-content: stretch;           }
  .align-content-space-between    { align-content: space-between;     }
  .align-content-space-around     { align-content: space-around;      }

  .align-self-auto                { align-self: auto;                 }
  .align-self-start               { align-self: start;                }
  .align-self-end                 { align-self: end;                  }
  .align-self-flex-start          { align-self: flex-start;           }
  .align-self-flex-end            { align-self: flex-end;             }
  .align-self-center              { align-self: center;               }
  .align-self-baseline            { align-self: baseline;             }
  .align-self-stretch             { align-self: stretch;              }

  @for $i from 0 through 10 {
    .gap-#{$i}          { gap: space-x($i);         }
    .column-gap-#{$i}   { column-gap: space-x($i);  }
    .row-gap-#{$i}      { row-gap: space-x($i);     }
  }

  /// Float
  .float-left   { float: left;  }
  .float-right  { float: right; }
  .float-none   { float: none;  }

  /// Visibility
  .visible  { visibility: visible; }
  .hidden   { visibility: hidden;  }

  /// Cursor
  $cursors:
    crosshair,
    text,
    move,
    grab,
    grabbing,
    not-allowed,
    all-scroll,
    ew-resize,
    ns-resize,
    pointer;

  @each $value in $cursors {
    .cursor-#{$value} { cursor: $value; }
  }

  /// Content helpers
  .virtual-space {
    &::after {
      content: "\200B";
    }
  }


  .btn-seemore {
    align-self: end;
    text-decoration: none;
    font-size: 10px;
    font-weight: normal;
    &:hover {
      color: $primary;
    }
    &.collapsed {
      // transform: rotate(180deg);
      &::after {
        content: '...⯆';
        // content: "...⮟";
      }
    }
    &:not(.collapsed) {
      transform: rotate(180deg);
      &::after {
        // content: '\00a0\00a0\00a0⮝';
        content: '⯆\00a0\00a0\00a0';
      }
    }

  }

  $heightDefault: 2.5rem;
  $heightHigher: 5.5rem;

  .annotated-field-expand {
    min-height: $heightDefault;
    &.collapse {
      &:not(.show) {
        display: block;
        overflow: hidden;
        max-height: $heightDefault;
      }
    }
    &.collapsing {
      height: $heightDefault;
    }

    &.variant-collapse-higher {
      min-height: $heightHigher;
      &.collapse {
        &:not(.show) {
          max-height: $heightHigher;
        }
      }
      &.collapsing {
        height: $heightHigher;
      }
      }
  }
    
}
