// Set background, box-shadow and text color for buttons
@mixin button-layout($bg-color, $text-color) {

	@if $bg-color == #fff {
		$shadow-value-static: 0.25;
		$shadow-value-hover: $shadow-value-static + 0.05;
		$shadow-value-active: $shadow-value-hover + 0.05;
	}

	@else {
		$shadow-value-static: 0.4;
		$shadow-value-hover: $shadow-value-static + 0.05;
		$shadow-value-active: $shadow-value-hover + 0.05;
	}

    @include box-shadow(0 1px 2px rgba(0,0,0,$shadow-value-static));

    background-color: $bg-color;
    color: $text-color;

	&:hover,
	&:focus {
		@include box-shadow(0 1px 4px rgba(0,0,0,$shadow-value-hover));

		background-color: $bg-color;
	}

    &:active {
        @include box-shadow(0 1px 6px rgba(0,0,0,$shadow-value-active));

        background-color: darken($bg-color, 6%);
    }

	&.disabled,
	&[disabled] {
		@include box-shadow(none);
	}

}

// Vertically center an element
@mixin vertical-align() {
	@include transform(translateY(-50%));

	position: relative;
	top: 50%;
}

// For truncating long entries with ellipses
@mixin ellipsis() {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%
}
// Parent element will need to have its width set in order for this to work

// Paint a non-link element to look like a link element
@mixin text-link() {
    color: $blue-medium;
    cursor: pointer;
    text-decoration: underline;
}