﻿.buy-link.loaded {
	position: relative;
	z-index:2;
	padding: 0;
	outline: 0;
	text-align: left;
	cursor: pointer;
	transform:none;
	color:initial;
	width:auto;
	height:auto;
	margin:0;
}

.buy-link > button::after {
	top: 0;
	border-style: solid;
	border-width: 0.15em 0.15em 0 0;
	content: '';
	display: inline-block;
	height: 0.3em;
	position: relative;
	top: -0.15em;
	transform: rotate(135deg);
	vertical-align: middle;
	width: 0.3em;
	margin-left: 0.5rem;
}


.buy-link button { 
	cursor:pointer; 
	font-family: inherit; 
	font-size:inherit;
	border: 0px;
	outline: none;
	border-radius: .375rem;
	padding: .5rem .8rem;
}


buy-link.show > button{ box-shadow: inset 0 0 0 1000px rgba(0,0,0,.1);}


/* If :focus detected the dropdown menu is displayed by making it visible */
.buy-link.show > button + div{ opacity:1; visibility:visible; }

/* style for the dropdown box */
.buy-link > div {
    pointer-events: auto;
    position: absolute;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: visibility 1s;
}

.buy-link > div {
	background-clip: padding-box;
	background-color: #fff;
	border: 0 solid rgba(22,28,45,.15);
	border-radius: .375rem;
	box-shadow: 0 .5rem 1.5rem rgba(22,28,45,.1);
	color: #161c2d;
	min-width: 14rem;
	padding: 1rem;
	text-align: left;
	z-index: 1000;
}

/* style the links in the dropdown */
.buy-link a {
    border:none;
    outline:0;
    display:block;
    text-decoration:none;
	font-size:0.9375rem
}

.buy-link-select-location {
	display: none;
}

.buy-link.has-retailers + .buy-link-select-location {
	display: block;
}

.buy-link-loading {
	display: inline-flex;
	flex-direction: column;
	position: relative;
	z-index: -3;
	align-items: center;
	font-size: 0.8em;
	
}

.buy-link .progress {
	height: 1px;
	background-color: #f1f2f2;
	border-radius: 200px;
	display: flex;
	overflow: hidden;
}

.buy-link .progress-bar:last-child {
	border-bottom-right-radius: 200px;
	border-top-right-radius: 200px;
}

.buy-link .progress-bar:first-child {
	border-bottom-left-radius: 200px;
	border-top-left-radius: 200px;
}

.buy-link .progress-bar {
	background-color: #000000;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	text-align: center;
	transition: width .6s ease;
	white-space: nowrap;
}

.buy-link .progress-indicator {
	margin-top: 10px;
}

.buy-link .progress-text {
	margin-top:8px;
}

.buy-link {
	color: #CFCFCF;
	transform: translateY(0%);
	position: relative;
	display: inline-block;
}

.buy-link-loading:before {
	content: '';
	border-right-color: currentcolor;
	border: 0.2em solid;
	border-right: 0.2em solid transparent;
	animation: 0.75s linear infinite spinner-border;
	border-radius: 50%;
	display: inline-block;
	width: 1rem;
	height: 1rem;
}


.buy-link.loaded::before,
.buy-link.loaded::after {
	display: none;
}

@keyframes spinner-border {
	to {
		transform: rotate(360deg)
	}
}
