// Name:            Tile
// Description:     Component to create tiled boxes
//
// Component:       `ui-tile`
//
// Modifiers:       `ui-tile-xsmall`
//                  `ui-tile-small`
//                  `ui-tile-large`
//                  `ui-tile-xlarge`
//                  `ui-tile-default`
//                  `ui-tile-muted`
//                  `ui-tile-primary`
//                  `ui-tile-secondary`
//
// States:          `ui-preserve-color`
//
// ========================================================================


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

@tile-padding-horizontal:                      15px;
@tile-padding-horizontal-s:                    @global-gutter;
@tile-padding-horizontal-m:                    @global-medium-gutter;
@tile-padding-vertical:                        @global-medium-margin;
@tile-padding-vertical-m:                      @global-large-margin;

@tile-xsmall-padding-vertical:                 @global-margin;

@tile-small-padding-vertical:                  @global-medium-margin;

@tile-large-padding-vertical:                  @global-large-margin;
@tile-large-padding-vertical-m:                @global-xlarge-margin;

@tile-xlarge-padding-vertical:                 @global-xlarge-margin;
@tile-xlarge-padding-vertical-m:               (@global-large-margin + @global-xlarge-margin);

@tile-default-background:                      @global-background;

@tile-muted-background:                        @global-muted-background;

@tile-primary-background:                      @global-primary-background;
@tile-primary-color-mode:                      light;

@tile-secondary-background:                    @global-secondary-background;
@tile-secondary-color-mode:                    light;


/* ========================================================================
   Component: Tile
 ========================================================================== */

.ui-tile {
    position: relative;
    box-sizing: border-box;
    padding-left: @tile-padding-horizontal;
    padding-right: @tile-padding-horizontal;
    padding-top: @tile-padding-vertical;
    padding-bottom: @tile-padding-vertical;
    .hook-tile;
}

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

    .ui-tile {
        padding-left: @tile-padding-horizontal-s;
        padding-right: @tile-padding-horizontal-s;
    }

}

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

    .ui-tile {
        padding-left: @tile-padding-horizontal-m;
        padding-right: @tile-padding-horizontal-m;
        padding-top: @tile-padding-vertical-m;
        padding-bottom: @tile-padding-vertical-m;
    }

}

/*
 * Micro clearfix
 */

.ui-tile::before,
.ui-tile::after {
    content: "";
    display: table;
}

.ui-tile::after { clear: both; }

/*
 * Remove margin from the last-child
 */

.ui-tile > :last-child { margin-bottom: 0; }


/* Size modifiers
 ========================================================================== */

/*
 * XSmall
 */

.ui-tile-xsmall {
    padding-top: @tile-xsmall-padding-vertical;
    padding-bottom: @tile-xsmall-padding-vertical;
}

/*
 * Small
 */

.ui-tile-small {
    padding-top: @tile-small-padding-vertical;
    padding-bottom: @tile-small-padding-vertical;
}

/*
 * Large
 */

.ui-tile-large {
    padding-top: @tile-large-padding-vertical;
    padding-bottom: @tile-large-padding-vertical;
}

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

    .ui-tile-large {
        padding-top: @tile-large-padding-vertical-m;
        padding-bottom: @tile-large-padding-vertical-m;
    }

}


/*
 * XLarge
 */

.ui-tile-xlarge {
    padding-top: @tile-xlarge-padding-vertical;
    padding-bottom: @tile-xlarge-padding-vertical;
}

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

    .ui-tile-xlarge {
        padding-top: @tile-xlarge-padding-vertical-m;
        padding-bottom: @tile-xlarge-padding-vertical-m;
    }

}


/* Style modifiers
 ========================================================================== */

/*
 * Default
 */

.ui-tile-default {
    background: @tile-default-background;
    .hook-tile-default;
}

/*
 * Muted
 */

.ui-tile-muted {
    background: @tile-muted-background;
    .hook-tile-muted;
}

/*
 * Primary
 */

.ui-tile-primary {
    background: @tile-primary-background;
    .hook-tile-primary;
}

// Color Mode
.ui-tile-primary:not(.ui-preserve-color):extend(.ui-light all) when (@tile-primary-color-mode = light) {}
.ui-tile-primary:not(.ui-preserve-color):extend(.ui-dark all) when (@tile-primary-color-mode = dark) {}

/*
 * Secondary
 */

.ui-tile-secondary {
    background: @tile-secondary-background;
    .hook-tile-secondary;
}

// Color Mode
.ui-tile-secondary:not(.ui-preserve-color):extend(.ui-light all) when (@tile-secondary-color-mode = light) {}
.ui-tile-secondary:not(.ui-preserve-color):extend(.ui-dark all) when (@tile-secondary-color-mode = dark) {}


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

.hook-tile-misc;

.hook-tile() {}
.hook-tile-default() {}
.hook-tile-muted() {}
.hook-tile-primary() {}
.hook-tile-secondary() {}
.hook-tile-misc() {}