@import "compass";
@import "mixins";

@include respond-to(phone, tablet) {
	.aui {
		.btn-group, .button-holder {
			@include respond-to(phone) {
				display: block;
				width: 100%;
			}

			> .btn + .dropdown-toggle {
				padding-left: 12px;
				padding-right: 12px;
			}
		}

		.btn {
			padding: 11px 19px;
			font-size: 17.5px;

			.caret {
				border-left-width: 5px;
				border-right-width: 5px;
				border-top-width: 5px;
				margin-top: 9px;
			}

			[class^="icon-"], [class*=" icon-"] {
				margin-top: 4px;
			}

			@include respond-to(phone) {
				@include box-sizing(border-box);

				display: block;
				margin-top: 5px;
				width: 100%;
			}
		}

		.btn-group > .btn + .btn,
		.btn-toolbar > .btn + .btn,
		.btn-toolbar > .btn-group + .btn,
		.btn-toolbar > .btn + .btn-group,
		.modal-footer .btn + .btn,
		.modal-footer .btn-group .btn + .btn {
			@include respond-to(phone) {
				margin-left: 0;
			}
		}

		.form-search .input-append .btn {
			display: inline-block;
			padding: 5px 19px 6px;

			@include respond-to(phone) {
				margin-top: 0;
				width: auto;
			}
		}

		.dropup .btn .caret {
			border-bottom-width: 5px;
		}

		button.close, button.btn.close {
			font-size: 2em;
			width: auto;
		}

		@media (max-width: 480px) {
			.modal-header button.close {
				padding: 12px;
			}
		}
	}
}