/*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
$pad: $interiorMargin * 1.5;

/*********************************** TYPE STYLES */
.t-btn {
	cursor: pointer;
}

/*********************************** STYLE STYLES */
.s-btn {
	@include border-radius($controlCr);
	@include box-sizing(border-box);
	@include text-shadow(rgba(black, 0.3) 0 1px 1px);
	line-height: 1.2em;
	text-decoration: none;
	&.s-very-subtle {
		@include containerSubtle($colorBodyBg, $colorBodyFg, true);
		&.paused {
			@include containerSubtle($colorPausedBg, $colorPausedFg, true);
			.icon:before {
				content:"\0000EF";
			}
		}
	}
}

.s-icon-btn {
	@extend .s-btn;
	font-size: 1.2em;
	.icon {
		color: $colorKey;
	}
	&.paused {
		.icon {
			color: $colorPausedFg;
		}
	}

	&:not(.disabled) {
		&:not(.paused) {
			&:hover {
				.icon {
					color: lighten($colorKey, $ltGamma);
				}
			}
		}
	}

	&.labeled {
		padding: 0 $pad/2;
		.icon {
			font-size: 1.5em;
		}
		.title-label {
			margin-left: $interiorMargin;
		}
	}

	&.pause-play {
		&.paused {
			@include pulse(500ms);
		}
		.icon:before {
			content:"\0000F1";
		}
	}

	&.show-thumbs {
		.icon:before {
			content:"\000039";
		}
	}
}

/*********************************** LAYOUT STYLES */
span.l-btn,
span.l-btn span,
a.l-btn,
a.l-btn span {
	display: inline-block;
}

.l-btn {
	padding: 0 $pad;
	&.sm {
		padding: 0 $interiorMargin;
	}
	&.vsm {
		padding: 0 $interiorMargin/2;
	}
}