/* Warren James - button styles for the static error pages
   Extracted verbatim from _assets/css/partials/component/buttons.css so the static pages in this
   folder render the same button as the storefront.

   Only the rules an error page needs are included (.btn base, .btn-dark-grey, .btn-padding, plus the
   base .btn radius/opacity rules from the end of that file). The rest of buttons.css is page- and
   component-specific (bag, wishlist, load-more, job apply) and would never match here.

   Why not just link partials.min.css? Because the .btn classes are scoped to `.wp-theme-3`, so
   _assets/css/partials/partials.min.css (130 KB) is not enough on its own - the base .btn rules live in
   _assets/css/core/core.min.css (142 KB). Together that is 272 KB of CSS, on a page that is under 3.5 KB.
   These rules are the whole of what the button needs, at 2.2 KB.

   Keeping the `.wp-theme-3` prefix means the markup below must carry class="wp-theme-3" on <body>,
   exactly as the CFML pages do, so a future rule added to buttons.css behaves identically. */

.wp-theme-3 .btn {
	text-transform: none;
	font-weight: 600;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	padding: 6px 12px;
	text-decoration: none;
	background-image: none;
	border-width: 0 0 4px 0;
	border-style: solid;
	border-radius: 2px;
	user-select: none;
	box-shadow: none;
	opacity: 0.8;
	transition: opacity 0.33s ease;
	color: #fff;
	background-color: #dcdbdb;
	border-top-color: #dcdbdb;
	letter-spacing: 2px;
}

.btn {
	border-radius: 4px;
}

.wp-theme-3 .btn {
	border-radius: 4px;
	opacity: 1.0;
	transition: opacity 0.33s ease;
}

.wp-theme-3 .btn-dark-grey,
.wp-theme-3 .btn-grey-dark {
	background-color: #000;
	border: 1px solid #000;
	color: #fff;
}

.wp-theme-3 .btn-dark-grey:hover,
.wp-theme-3 .btn-grey-dark:hover {
	background-color: #333;
	border: 1px solid #333;
	color: #fff;
	opacity: 1;
}

.wp-theme-3 .btn-dark-grey.active,
.wp-theme-3 .btn-grey-dark.active,
.wp-theme-3 .btn-dark-grey.focus,
.wp-theme-3 .btn-grey-dark.focus {
	background-color: #333;
	border: 1px solid #333;
	color: #fff;
	opacity: 1;
}

.wp-theme-3 .btn:hover,
.wp-theme-3 .btn:active {
	opacity: 1;
}

.btn-padding {
	padding: 12px 30px !important;
}