/**
 * Button Reset
 *
 */
@mixin button-reset() {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	outline: none;
	cursor: pointer;
}

/**
 * Grid, Center Last
 *
 */
@mixin grid-center-last( $columns ) {
	$total_columns: $columns * 2;
	$span: $total_columns / $columns;
	$offset: $columns - 1;
	$nth-child: if( $columns % 2 == 0, 'odd', 'even' );

	display: grid;
	grid-template-columns: repeat( $total_columns, 1fr );

	& > * {
		grid-column: span $span;

		&:nth-last-child(#{$offset}):nth-child(#{$nth-child}) {
			grid-column: $span / span $span;
		}
	}
}

/**
 * Margin, No Edge
 * Removes left margin from first item, right margin from last item
 */
@mixin margin-no-edge( $margin ) {
  margin: $margin;

  &:first-child {
    margin-left: 0;
  }

  &:last-child {
    margin-right: 0;
  }

}

/**
 * Icon Position
 *
 */
@mixin icon-position( $icon_size, $container_size: null ) {
	width: $icon_size;
	height: $icon_size;

    @if ( $container_size ) {
        margin-top: calc( ( #{$container_size} - #{$icon_size} ) / 2 );
    }
}

/**
 * Block Cover
 * Creates a block that covers the full width/height of parent div. Typically used on a :before pseudo element
 */
@mixin block-cover() {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/**
 * Placeholder Color
 *
 */
@mixin placeholder-color( $color ) {

  ::-moz-placeholder {
  	color: $color;
  	opacity: 1;
  }

  ::-ms-input-placeholder {
  	color: $color;
  }

  ::-webkit-input-placeholder {
  	color: $color;
  }

  input:focus::-webkit-input-placeholder,
  input:focus::-moz-placeholder,
  input:focus:-ms-input-placeholder,
  textarea:focus::-webkit-input-placeholder,
  textarea:focus::-moz-placeholder,
  textarea:focus:-ms-input-placeholder {
  	color:transparent;
  }

}

/**
 * Clearfix
 *
 */
@mixin clearfix() {
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}

/**
 * Font Sizes
 *
**/
@mixin font-sizes( $base: null, $tablet: null, $medium: null, $large: null ) {

    @if ( $base ) {
        font-size: $base;
    }

    @if( $tablet ) {
        @include media(">=tablet") {
            font-size: $tablet;
        }
    }

    @if( $medium ) {
        @include media(">=medium") {
            font-size: $medium;
        }
    }

    @if( $large ) {
        @include media(">=desktop") {
            font-size: $large;
        }
    }

}

/**
 * Columns
 *
 */
@mixin columns( $columns, $grid_item_element: article, $gap: null ) {

	@if( $gap == null ) {
		$gap: $grid-gap;
	}

	& > #{$grid_item_element} {
		float: left;
		margin-left: $gap / $grid-width * 100%;
		width: ( ( $grid-width - $gap * ( $columns - 1 ) ) / $columns ) / $grid-width * 100%;

		&:nth-of-type(#{$columns}n+1) {
			clear: both;
			margin-left: 0;
		}
	}

	@supports( display: grid ) {
		display: grid;
		grid-column-gap: $gap;
		grid-template-columns: repeat( $columns, 1fr );

		& > #{$grid_item_element} {
			margin-left: 0;
			width: 100%;
		}

		header, nav, aside, footer {
			grid-column: 1 / -1;
		}
	}
}

/**
 * Columns, Mobile
 *
 */
@mixin columns-mobile( $columns, $grid_item_element: article, $gap: null ) {

	@include media("<tablet") {
		@include columns( $columns,$grid_item_element, $gap );
	}
}

/**
 * Columns, Tablet
 *
 */
@mixin columns-tablet( $columns, $grid_item_element: article, $gap: null ) {

	@include media(">=tablet", "<medium") {
		@include columns( $columns, $grid_item_element, $gap );
	}

}

/**
 * Columns, Tablet Up
 *
 */
@mixin columns-tablet-up( $columns, $grid_item_element: article, $gap: null ) {

	@include media(">=tablet") {
		@include columns( $columns, $grid_item_element, $gap );
	}

}

/**
 * Columns, Desktop
 *
 */
@mixin columns-desktop( $columns, $grid_item_element: article, $gap: null ) {
	@include media(">=medium") {
		@include columns( $columns, $grid_item_element, $gap );
	}
}
