// Name:            Width
// Description:     Utilities for widths
//
// Component:       `ui-child-width-*`
//                  `ui-width-*`
//
// ========================================================================


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

@width-small-width:                             150px;
@width-medium-width:                            300px;
@width-large-width:                             450px;
@width-xlarge-width:                            600px;
@width-xxlarge-width:                           750px;


/* ========================================================================
   Component: Width
 ========================================================================== */


/* Equal child widths
 ========================================================================== */

[class*='ui-child-width'] > * {
    box-sizing: border-box;
    width: 100%;
}

.ui-child-width-1-2 > * { width: 50%; }
.ui-child-width-1-3 > * { width: ~'calc(100% * 1 / 3.001)'; }
.ui-child-width-1-4 > * { width: 25%; }
.ui-child-width-1-5 > * { width: 20%; }
.ui-child-width-1-6 > * { width: ~'calc(100% * 1 / 6.001)'; }

.ui-child-width-auto > * { width: auto; }

/*
 * 1. Reset the `min-width`, which is set to auto by default, because
 *    flex items won't shrink below their minimum intrinsic content size.
 *    Using `1px` instead of `0`, so items still wrap into the next line,
 *    if they have zero width and padding and the predecessor is 100% wide.
 */

.ui-child-width-expand > :not([class*='ui-width']) {
    flex: 1;
    /* 1 */
    min-width: 1px;
}

/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {

    .ui-child-width-1-1\@s > * { width: 100%; }
    .ui-child-width-1-2\@s > * { width: 50%; }
    .ui-child-width-1-3\@s > * { width: ~'calc(100% * 1 / 3.001)'; }
    .ui-child-width-1-4\@s > * { width: 25%; }
    .ui-child-width-1-5\@s > * { width: 20%; }
    .ui-child-width-1-6\@s > * { width: ~'calc(100% * 1 / 6.001)'; }

    .ui-child-width-auto\@s > * { width: auto; }
    .ui-child-width-expand\@s > :not([class*='ui-width']) {
        flex: 1;
        min-width: 1px;
    }

}

/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {

    .ui-child-width-1-1\@m > * { width: 100%; }
    .ui-child-width-1-2\@m > * { width: 50%; }
    .ui-child-width-1-3\@m > * { width: ~'calc(100% * 1 / 3.001)'; }
    .ui-child-width-1-4\@m > * { width: 25%; }
    .ui-child-width-1-5\@m > * { width: 20%; }
    .ui-child-width-1-6\@m > * { width: ~'calc(100% * 1 / 6.001)'; }

    .ui-child-width-auto\@m > * { width: auto; }
    .ui-child-width-expand\@m > :not([class*='ui-width']) {
        flex: 1;
        min-width: 1px;
    }

}

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

    .ui-child-width-1-1\@l > * { width: 100%; }
    .ui-child-width-1-2\@l > * { width: 50%; }
    .ui-child-width-1-3\@l > * { width: ~'calc(100% * 1 / 3.001)'; }
    .ui-child-width-1-4\@l > * { width: 25%; }
    .ui-child-width-1-5\@l > * { width: 20%; }
    .ui-child-width-1-6\@l > * { width: ~'calc(100% * 1 / 6.001)'; }

    .ui-child-width-auto\@l > * { width: auto; }
    .ui-child-width-expand\@l > :not([class*='ui-width']) {
        flex: 1;
        min-width: 1px;
    }

}

/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {

    .ui-child-width-1-1\@xl > * { width: 100%; }
    .ui-child-width-1-2\@xl > * { width: 50%; }
    .ui-child-width-1-3\@xl > * { width: ~'calc(100% * 1 / 3.001)'; }
    .ui-child-width-1-4\@xl > * { width: 25%; }
    .ui-child-width-1-5\@xl > * { width: 20%; }
    .ui-child-width-1-6\@xl > * { width: ~'calc(100% * 1 / 6.001)'; }

    .ui-child-width-auto\@xl > * { width: auto; }
    .ui-child-width-expand\@xl > :not([class*='ui-width']) {
        flex: 1;
        min-width: 1px;
    }

}


/* Single Widths
 ========================================================================== */

/*
 * 1. `max-width` is needed for the pixel-based classes
 */

[class*='ui-width'] {
    box-sizing: border-box;
    width: 100%;
    /* 1 */
    max-width: 100%;
}

/* Halves */
.ui-width-1-2 { width: 50%; }

/* Thirds */
.ui-width-1-3 { width: ~'calc(100% * 1 / 3.001)'; }
.ui-width-2-3 { width: ~'calc(100% * 2 / 3.001)'; }

/* Quarters */
.ui-width-1-4 { width: 25%; }
.ui-width-3-4 { width: 75%; }

/* Fifths */
.ui-width-1-5 { width: 20%; }
.ui-width-2-5 { width: 40%; }
.ui-width-3-5 { width: 60%; }
.ui-width-4-5 { width: 80%; }

/* Sixths */
.ui-width-1-6 { width: ~'calc(100% * 1 / 6.001)'; }
.ui-width-5-6 { width: ~'calc(100% * 5 / 6.001)'; }

/* Pixel */
.ui-width-small { width: @width-small-width; }
.ui-width-medium { width: @width-medium-width; }
.ui-width-large { width: @width-large-width; }
.ui-width-xlarge { width: @width-xlarge-width; }
.ui-width-xxlarge { width: @width-xxlarge-width; }

/* Auto */
.ui-width-auto { width: auto; }

/* Expand */
.ui-width-expand {
    flex: 1;
    min-width: 1px;
}

/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {

    /* Whole */
    .ui-width-1-1\@s { width: 100%; }

    /* Halves */
    .ui-width-1-2\@s { width: 50%; }

    /* Thirds */
    .ui-width-1-3\@s { width: ~'calc(100% * 1 / 3.001)'; }
    .ui-width-2-3\@s { width: ~'calc(100% * 2 / 3.001)'; }

    /* Quarters */
    .ui-width-1-4\@s { width: 25%; }
    .ui-width-3-4\@s { width: 75%; }

    /* Fifths */
    .ui-width-1-5\@s { width: 20%; }
    .ui-width-2-5\@s { width: 40%; }
    .ui-width-3-5\@s { width: 60%; }
    .ui-width-4-5\@s { width: 80%; }

    /* Sixths */
    .ui-width-1-6\@s { width: ~'calc(100% * 1 / 6.001)'; }
    .ui-width-5-6\@s { width: ~'calc(100% * 5 / 6.001)'; }

    /* Pixel */
    .ui-width-small\@s { width: @width-small-width; }
    .ui-width-medium\@s { width: @width-medium-width; }
    .ui-width-large\@s { width: @width-large-width; }
    .ui-width-xlarge\@s { width: @width-xlarge-width; }
    .ui-width-xxlarge\@s { width: @width-xxlarge-width; }

    /* Auto */
    .ui-width-auto\@s { width: auto; }

    /* Expand */
    .ui-width-expand\@s {
        flex: 1;
        min-width: 1px;
    }

}

/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {

    /* Whole */
    .ui-width-1-1\@m { width: 100%; }

    /* Halves */
    .ui-width-1-2\@m { width: 50%; }

    /* Thirds */
    .ui-width-1-3\@m { width: ~'calc(100% * 1 / 3.001)'; }
    .ui-width-2-3\@m { width: ~'calc(100% * 2 / 3.001)'; }

    /* Quarters */
    .ui-width-1-4\@m { width: 25%; }
    .ui-width-3-4\@m { width: 75%; }

    /* Fifths */
    .ui-width-1-5\@m { width: 20%; }
    .ui-width-2-5\@m { width: 40%; }
    .ui-width-3-5\@m { width: 60%; }
    .ui-width-4-5\@m { width: 80%; }

    /* Sixths */
    .ui-width-1-6\@m { width: ~'calc(100% * 1 / 6.001)'; }
    .ui-width-5-6\@m { width: ~'calc(100% * 5 / 6.001)'; }

    /* Pixel */
    .ui-width-small\@m { width: @width-small-width; }
    .ui-width-medium\@m { width: @width-medium-width; }
    .ui-width-large\@m { width: @width-large-width; }
    .ui-width-xlarge\@m { width: @width-xlarge-width; }
    .ui-width-xxlarge\@m { width: @width-xxlarge-width; }

     /* Auto */
    .ui-width-auto\@m { width: auto; }

    /* Expand */
    .ui-width-expand\@m {
        flex: 1;
        min-width: 1px;
    }

}

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

    /* Whole */
    .ui-width-1-1\@l { width: 100%; }

    /* Halves */
    .ui-width-1-2\@l { width: 50%; }

    /* Thirds */
    .ui-width-1-3\@l { width: ~'calc(100% * 1 / 3.001)'; }
    .ui-width-2-3\@l { width: ~'calc(100% * 2 / 3.001)'; }

    /* Quarters */
    .ui-width-1-4\@l { width: 25%; }
    .ui-width-3-4\@l { width: 75%; }

    /* Fifths */
    .ui-width-1-5\@l { width: 20%; }
    .ui-width-2-5\@l { width: 40%; }
    .ui-width-3-5\@l { width: 60%; }
    .ui-width-4-5\@l { width: 80%; }

    /* Sixths */
    .ui-width-1-6\@l { width: ~'calc(100% * 1 / 6.001)'; }
    .ui-width-5-6\@l { width: ~'calc(100% * 5 / 6.001)'; }

    /* Pixel */
    .ui-width-small\@l { width: @width-small-width; }
    .ui-width-medium\@l { width: @width-medium-width; }
    .ui-width-large\@l { width: @width-large-width; }
    .ui-width-xlarge\@l { width: @width-xlarge-width; }
    .ui-width-xxlarge\@l { width: @width-xxlarge-width; }

    /* Auto */
    .ui-width-auto\@l { width: auto; }

    /* Expand */
    .ui-width-expand\@l {
        flex: 1;
        min-width: 1px;
    }

}

/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {

    /* Whole */
    .ui-width-1-1\@xl { width: 100%; }

    /* Halves */
    .ui-width-1-2\@xl { width: 50%; }

    /* Thirds */
    .ui-width-1-3\@xl { width: ~'calc(100% * 1 / 3.001)'; }
    .ui-width-2-3\@xl { width: ~'calc(100% * 2 / 3.001)'; }

    /* Quarters */
    .ui-width-1-4\@xl { width: 25%; }
    .ui-width-3-4\@xl { width: 75%; }

    /* Fifths */
    .ui-width-1-5\@xl { width: 20%; }
    .ui-width-2-5\@xl { width: 40%; }
    .ui-width-3-5\@xl { width: 60%; }
    .ui-width-4-5\@xl { width: 80%; }

    /* Sixths */
    .ui-width-1-6\@xl { width: ~'calc(100% * 1 / 6.001)'; }
    .ui-width-5-6\@xl { width: ~'calc(100% * 5 / 6.001)'; }

    /* Pixel */
    .ui-width-small\@xl { width: @width-small-width; }
    .ui-width-medium\@xl { width: @width-medium-width; }
    .ui-width-large\@xl { width: @width-large-width; }
    .ui-width-xlarge\@xl { width: @width-xlarge-width; }
    .ui-width-xxlarge\@xl { width: @width-xxlarge-width; }

    /* Auto */
    .ui-width-auto\@xl { width: auto; }

    /* Expand */
    .ui-width-expand\@xl {
        flex: 1;
        min-width: 1px;
    }

}


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

.hook-width-misc;

.hook-width-misc() {}