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


// 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
// ========================================================================

.hook-tile() {}


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

.hook-tile-default() {}

.hook-tile-muted() {}

.hook-tile-primary() {}

.hook-tile-secondary() {}


// Miscellaneous
// ========================================================================

.hook-tile-misc() {}