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


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











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

.uk-tile {
    display: flow-root;
    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;
    @if(mixin-exists(hook-tile)) {@include hook-tile();}
}

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

    .uk-tile {
        padding-left: $tile-padding-horizontal-s;
        padding-right: $tile-padding-horizontal-s;
    }

}

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

    .uk-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;
    }

}

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

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


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

/*
 * XSmall
 */

.uk-tile-xsmall {
    padding-top: $tile-xsmall-padding-vertical;
    padding-bottom: $tile-xsmall-padding-vertical;
}

/*
 * Small
 */

.uk-tile-small {
    padding-top: $tile-small-padding-vertical;
    padding-bottom: $tile-small-padding-vertical;
}

/*
 * Large
 */

.uk-tile-large {
    padding-top: $tile-large-padding-vertical;
    padding-bottom: $tile-large-padding-vertical;
}

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

    .uk-tile-large {
        padding-top: $tile-large-padding-vertical-m;
        padding-bottom: $tile-large-padding-vertical-m;
    }

}


/*
 * XLarge
 */

.uk-tile-xlarge {
    padding-top: $tile-xlarge-padding-vertical;
    padding-bottom: $tile-xlarge-padding-vertical;
}

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

    .uk-tile-xlarge {
        padding-top: $tile-xlarge-padding-vertical-m;
        padding-bottom: $tile-xlarge-padding-vertical-m;
    }

}


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

/*
 * Default
 */

.uk-tile-default {
    background-color: $tile-default-background;
    @if(mixin-exists(hook-tile-default)) {@include hook-tile-default();}
}

.uk-tile-default.uk-tile-hover:hover {
    @if(mixin-exists(hook-tile-default-hover)) {@include hook-tile-default-hover();}
}

/*
 * Muted
 */

.uk-tile-muted {
    background-color: $tile-muted-background;
    @if(mixin-exists(hook-tile-muted)) {@include hook-tile-muted();}
}

.uk-tile-muted.uk-tile-hover:hover {
    @if(mixin-exists(hook-tile-muted-hover)) {@include hook-tile-muted-hover();}
}

/*
 * Primary
 */

.uk-tile-primary {
    background-color: $tile-primary-background;
    @if(mixin-exists(hook-tile-primary)) {@include hook-tile-primary();}
}

.uk-tile-primary.uk-tile-hover:hover {
    @if(mixin-exists(hook-tile-primary-hover)) {@include hook-tile-primary-hover();}
}

// Color Mode
@if ( $tile-primary-color-mode == light ) { .uk-tile-primary:not(.uk-preserve-color) { @extend .uk-light !optional;} }
@if ( $tile-primary-color-mode == dark ) { .uk-tile-primary:not(.uk-preserve-color) { @extend .uk-dark !optional;} }

/*
 * Secondary
 */

.uk-tile-secondary {
    background-color: $tile-secondary-background;
    @if(mixin-exists(hook-tile-secondary)) {@include hook-tile-secondary();}
}

.uk-tile-secondary.uk-tile-hover:hover {
    @if(mixin-exists(hook-tile-secondary-hover)) {@include hook-tile-secondary-hover();}
}

// Color Mode
@if ( $tile-secondary-color-mode == light ) { .uk-tile-secondary:not(.uk-preserve-color) { @extend .uk-light !optional;} }
@if ( $tile-secondary-color-mode == dark ) { .uk-tile-secondary:not(.uk-preserve-color) { @extend .uk-dark !optional;} }


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

@if(mixin-exists(hook-tile-misc)) {@include hook-tile-misc();}

// @mixin hook-tile(){}
// @mixin hook-tile-default(){}
// @mixin hook-tile-default-hover(){}
// @mixin hook-tile-muted(){}
// @mixin hook-tile-muted-hover(){}
// @mixin hook-tile-primary(){}
// @mixin hook-tile-primary-hover(){}
// @mixin hook-tile-secondary(){}
// @mixin hook-tile-secondary-hover(){}
// @mixin hook-tile-misc(){}