@madie/madie-design-system 1.2.39 → 1.2.41

package/styles/components/_buttons.scss

@@ -1,580 +1,580 @@
 /* Buttons */
 
 .btn {
-  border-radius: 2px;
-  cursor: pointer;
-  font-family: $font-family-base;
-  font-size: 1.125rem;
-  font-weight: 500;
-  line-height: 1.4;
-  max-width: 100%;
-  padding: 10px 12px;
-  position: relative;
-  text-align: left;
-  text-decoration: none;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  white-space: normal;
-
-  &.btn-primary {
-    background-color: $button-color-primary;
-    border: 3px solid $button-color-primary;
-    border-radius: 3px;
-    color: $color-white;
-    padding-right: 3em;
-
-    &::after {
-      border-top: 4px solid $color-white;
-      content: '';
-      font-family: FontAwesome;
-      margin-top: -3px;
-      opacity: 0;
-      position: absolute;
-      right: 1em;
-      top: 50%;
-      -webkit-transition-duration: 0.2s;
-      transition-duration: 0.2s;
-      -webkit-transition-timing-function: ease-out;
-      transition-timing-function: ease-out;
-      width: 0;
-    }
-
-    &::before {
-      content: '\f054';
-      font-family: FontAwesome;
-      margin-top: -12px;
-      position: absolute;
-      right: 0.75em;
-      top: 50%;
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: transparent;
-      border-color: $button-color-primary;
-      box-shadow: none;
-      color: $button-color-primary;
-
-      &::after {
-        border-color: $button-color-primary;
-        opacity: 1;
-        width: 20px;
-      }
-    }
-
-    &.inverse-hover {
-      &:hover,
-      &:focus,
-      &:active {
-        background-color: transparent;
-        border-color: $color-white;
-        box-shadow: none;
-        color: $color-white;
-
-        &::after {
-          border-color: $color-white;
-          opacity: 1;
-          width: 20px;
-        }
-      }
-    }
-  }
-
-  &.btn-secondary {
-    background-color: $button-color-secondary;
-    border: 3px solid $button-color-secondary;
-    border-radius: 3px;
-    color: $color-white;
-    padding-right: 3em;
-
-    &::after {
-      border-top: 4px solid $color-white;
-      content: '';
-      font-family: FontAwesome;
-      opacity: 0;
-      position: absolute;
-      right: 1em;
-      top: 1.05em;
-      -webkit-transition-duration: 0.2s;
-      transition-duration: 0.2s;
-      -webkit-transition-timing-function: ease-out;
-      transition-timing-function: ease-out;
-      width: 0;
-    }
-
-    &::before {
-      content: '\f054';
-      font-family: FontAwesome;
-      padding: 0 1px;
-      position: absolute;
-      right: 0.75em;
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: transparent;
-      border-color: $button-color-secondary;
-      box-shadow: none;
-      color: $button-color-secondary;
-
-      &::after {
-        border-color: $button-color-secondary;
-        opacity: 1;
-        width: 20px;
-      }
-    }
-
-    &.inverse-hover {
-      &:hover,
-      &:focus,
-      &:active {
-        background-color: transparent;
-        border-color: $color-white;
-        box-shadow: none;
-        color: $color-white;
-
-        &::after {
-          border-color: $color-white;
-          opacity: 1;
-          width: 20px;
-        }
-      }
-    }
-  }
-
-  &.btn-navigation {
-    background-color: $color-teal-dark;
-    border: 1px solid $color-white;
-    border-radius: 3px;
-    color: $color-white;
-    font-size: 0.9rem;
-    line-height: 1.5;
-    margin-top: 10px;
-    padding: 15px 0 15px 10px;
-    width: 100%;
-
-    .btn-navigation-icon {
-      position: absolute;
-      right: 1rem;
-      width: 0.5rem;
-
-      .chevron-icon {
-        fill: white;
-      }
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: $color-teal-dark;
-      border-color: $color-white;
-      box-shadow: none;
-      color: $color-white;
-
-      .btn-navigation-icon {
-        .chevron-icon {
-          fill: $color-white;
-        }
-      }
-
-      &::after {
-        border-color: $color-teal-dark;
-        opacity: 1;
-        width: 20px;
-      }
-    }
-
-    &.inverse-hover {
-      &:hover,
-      &:focus,
-      &:active {
-        background-color: $color-white;
-        border-color: $color-white;
-        box-shadow: none;
-        color: $color-teal-dark;
-
-        .btn-navigation-icon {
-          .chevron-icon {
-            fill: $color-teal;
-          }
-        }
-
-        &::after {
-          border-color: $color-teal-dark;
-          opacity: 1;
-          width: 20px;
-        }
-      }
-    }
-  }
-
-  &.btn-tertiary {
-    background-color: $color-gray-light;
-    border: 3px solid $color-gray-light;
-    color: $brand-primary-dark;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: $color-gray-medium;
-      border-color: $color-gray-medium;
-      box-shadow: none;
-    }
-
-    &.btn-inverse {
-      background-color: $color-white;
-      border-color: $color-white;
-      color: $color-teal;
-
-      &:hover {
-        background-color: $color-gray-light;
-        border-color: $color-gray-light;
-      }
-    }
-  }
-
-  &.btn-subscribe {
-    background-color: $color-teal;
-    border: 3px solid $color-teal;
-    color: $color-white;
-    border-radius: 0;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: $color-white;
-      box-shadow: none;
-      color: $color-teal;
-    }
-  }
+	border-radius: 2px;
+	cursor: pointer;
+	font-family: $font-family-base;
+	font-size: 1.125rem;
+	font-weight: 500;
+	line-height: 1.4;
+	max-width: 100%;
+	padding: 10px 12px;
+	position: relative;
+	text-align: left;
+	text-decoration: none;
+	-webkit-transition-duration: 0.2s;
+	transition-duration: 0.2s;
+	white-space: normal;
+
+	&.btn-primary {
+		background-color: $button-color-primary;
+		border: 3px solid $button-color-primary;
+		border-radius: 3px;
+		color: $color-white;
+		padding-right: 3em;
+
+		&::after {
+			border-top: 4px solid $color-white;
+			content: "";
+			font-family: FontAwesome;
+			margin-top: -3px;
+			opacity: 0;
+			position: absolute;
+			right: 1em;
+			top: 50%;
+			-webkit-transition-duration: 0.2s;
+			transition-duration: 0.2s;
+			-webkit-transition-timing-function: ease-out;
+			transition-timing-function: ease-out;
+			width: 0;
+		}
+
+		&::before {
+			content: "\f054";
+			font-family: FontAwesome;
+			margin-top: -12px;
+			position: absolute;
+			right: 0.75em;
+			top: 50%;
+		}
+
+		&:hover,
+		&:focus,
+		&:active {
+			background-color: transparent;
+			border-color: $button-color-primary;
+			box-shadow: none;
+			color: $button-color-primary;
+
+			&::after {
+				border-color: $button-color-primary;
+				opacity: 1;
+				width: 20px;
+			}
+		}
+
+		&.inverse-hover {
+			&:hover,
+			&:focus,
+			&:active {
+				background-color: transparent;
+				border-color: $color-white;
+				box-shadow: none;
+				color: $color-white;
+
+				&::after {
+					border-color: $color-white;
+					opacity: 1;
+					width: 20px;
+				}
+			}
+		}
+	}
+
+	&.btn-secondary {
+		background-color: $button-color-secondary;
+		border: 3px solid $button-color-secondary;
+		border-radius: 3px;
+		color: $color-white;
+		padding-right: 3em;
+
+		&::after {
+			border-top: 4px solid $color-white;
+			content: "";
+			font-family: FontAwesome;
+			opacity: 0;
+			position: absolute;
+			right: 1em;
+			top: 1.05em;
+			-webkit-transition-duration: 0.2s;
+			transition-duration: 0.2s;
+			-webkit-transition-timing-function: ease-out;
+			transition-timing-function: ease-out;
+			width: 0;
+		}
+
+		&::before {
+			content: "\f054";
+			font-family: FontAwesome;
+			padding: 0 1px;
+			position: absolute;
+			right: 0.75em;
+		}
+
+		&:hover,
+		&:focus,
+		&:active {
+			background-color: transparent;
+			border-color: $button-color-secondary;
+			box-shadow: none;
+			color: $button-color-secondary;
+
+			&::after {
+				border-color: $button-color-secondary;
+				opacity: 1;
+				width: 20px;
+			}
+		}
+
+		&.inverse-hover {
+			&:hover,
+			&:focus,
+			&:active {
+				background-color: transparent;
+				border-color: $color-white;
+				box-shadow: none;
+				color: $color-white;
+
+				&::after {
+					border-color: $color-white;
+					opacity: 1;
+					width: 20px;
+				}
+			}
+		}
+	}
+
+	&.btn-navigation {
+		background-color: $color-teal-dark;
+		border: 1px solid $color-white;
+		border-radius: 3px;
+		color: $color-white;
+		font-size: 0.9rem;
+		line-height: 1.5;
+		margin-top: 10px;
+		padding: 15px 0 15px 10px;
+		width: 100%;
+
+		.btn-navigation-icon {
+			position: absolute;
+			right: 1rem;
+			width: 0.5rem;
+
+			.chevron-icon {
+				fill: white;
+			}
+		}
+
+		&:hover,
+		&:focus,
+		&:active {
+			background-color: $color-teal-dark;
+			border-color: $color-white;
+			box-shadow: none;
+			color: $color-white;
+
+			.btn-navigation-icon {
+				.chevron-icon {
+					fill: $color-white;
+				}
+			}
+
+			&::after {
+				border-color: $color-teal-dark;
+				opacity: 1;
+				width: 20px;
+			}
+		}
+
+		&.inverse-hover {
+			&:hover,
+			&:focus,
+			&:active {
+				background-color: $color-white;
+				border-color: $color-white;
+				box-shadow: none;
+				color: $color-teal-dark;
+
+				.btn-navigation-icon {
+					.chevron-icon {
+						fill: $color-teal;
+					}
+				}
+
+				&::after {
+					border-color: $color-teal-dark;
+					opacity: 1;
+					width: 20px;
+				}
+			}
+		}
+	}
+
+	&.btn-tertiary {
+		background-color: $color-gray-light;
+		border: 3px solid $color-gray-light;
+		color: $brand-primary-dark;
+
+		&:hover,
+		&:focus,
+		&:active {
+			background-color: $color-gray-medium;
+			border-color: $color-gray-medium;
+			box-shadow: none;
+		}
+
+		&.btn-inverse {
+			background-color: $color-white;
+			border-color: $color-white;
+			color: $color-teal;
+
+			&:hover {
+				background-color: $color-gray-light;
+				border-color: $color-gray-light;
+			}
+		}
+	}
+
+	&.btn-subscribe {
+		background-color: $color-teal;
+		border: 3px solid $color-teal;
+		color: $color-white;
+		border-radius: 0;
+
+		&:hover,
+		&:focus,
+		&:active {
+			background-color: $color-white;
+			box-shadow: none;
+			color: $color-teal;
+		}
+	}
 }
 
 .btn-selected,
 .btnSmall {
-  background-color: white;
-  border-color: $color-teal;
-  border-radius: 0;
-  color: $color-teal;
-  font-size: 15px;
-  font-weight: normal;
-  line-height: 1em;
-  margin-left: auto;
-  padding: 11px 15px;
-
-  &.is-selected,
-  &:active,
-  &:hover,
-  &:focus {
-    background-color: $color-teal;
-    border-color: $color-teal;
-    color: $color-white;
-  }
+	background-color: white;
+	border-color: $color-teal;
+	border-radius: 0;
+	color: $color-teal;
+	font-size: 15px;
+	font-weight: normal;
+	line-height: 1em;
+	margin-left: auto;
+	padding: 11px 15px;
+
+	&.is-selected,
+	&:active,
+	&:hover,
+	&:focus {
+		background-color: $color-teal;
+		border-color: $color-teal;
+		color: $color-white;
+	}
 }
 
 .btn-save {
-  background-color: $color-teal;
-  border-color: $color-teal;
-  border-radius: 0;
-  color: $color-white;
-  font-size: 15px;
-  font-weight: normal;
-  line-height: 1em;
-  margin-left: auto;
-  padding: 11px 15px;
-
-  &:active,
-  &:hover,
-  &:focus {
-    color: $color-white;
-  }
+	background-color: $color-teal;
+	border-color: $color-teal;
+	border-radius: 0;
+	color: $color-white;
+	font-size: 15px;
+	font-weight: normal;
+	line-height: 1em;
+	margin-left: auto;
+	padding: 11px 15px;
+
+	&:active,
+	&:hover,
+	&:focus {
+		color: $color-white;
+	}
 }
 
 .btn-cancel {
-  background-color: white;
-  border-color: $color-teal;
-  border-radius: 0;
-  color: $color-teal;
-  font-size: 15px;
-  font-weight: normal;
-  line-height: 1em;
-  margin-left: auto;
-  padding: 11px 15px;
-
-  &:active,
-  &:hover,
-  &:focus {
-    background-color: $color-white;
-    color: $color-teal;
-    text-decoration: underline;
-  }
+	background-color: white;
+	border-color: $color-teal;
+	border-radius: 0;
+	color: $color-teal;
+	font-size: 15px;
+	font-weight: normal;
+	line-height: 1em;
+	margin-left: auto;
+	padding: 11px 15px;
+
+	&:active,
+	&:hover,
+	&:focus {
+		background-color: $color-white;
+		color: $color-teal;
+		text-decoration: underline;
+	}
 }
 
 .btnSmall.title-case {
-  color: $color-teal;
-  font-weight: 500;
-  text-decoration: none;
-  text-transform: capitalize;
-
-  &:hover,
-  &:focus {
-    color: white;
-    text-decoration: underline;
-  }
+	color: $color-teal;
+	font-weight: 500;
+	text-decoration: none;
+	text-transform: capitalize;
+
+	&:hover,
+	&:focus {
+		color: white;
+		text-decoration: underline;
+	}
 }
 
 .btn-download-measures {
-  @extend .btn-selected;
-  border: 1px solid $color-teal;
-  font-weight: 500;
-  margin-top: 0;
+	@extend .btn-selected;
+	border: 1px solid $color-teal;
+	font-weight: 500;
+	margin-top: 0;
 }
 
 a.button-link-secondary {
-  background: $color-green;
-  color: white;
-  float: left;
-  font-size: 17px;
-  font-weight: 500;
-  margin-bottom: 15px;
-  position: relative;
-  white-space: normal;
-  width: 100%;
-
-  .link-icon {
-    background: $color-green;
-    display: block;
-    float: right;
-    height: 100%;
-    padding: 12px 15px;
-    position: absolute;
-    right: 0;
-  }
-
-  &:active,
-  &:focus,
-  &:hover {
-    background-color: darken($color-green, 5%);
-    color: $color-white;
-
-    .link-icon {
-      background-color: darken($color-green, 5%);
-    }
-  }
-
-  .link {
-    display: block;
-    float: left;
-    line-height: 1.2;
-    margin-left: 0;
-    padding: 18px 76px 18px 23px;
-
-    .small {
-      font-weight: 300;
-      margin-top: 10px;
-    }
-  }
-
-  img {
-    height: 30px;
-    width: 30px;
-  }
+	background: $color-green;
+	color: white;
+	float: left;
+	font-size: 17px;
+	font-weight: 500;
+	margin-bottom: 15px;
+	position: relative;
+	white-space: normal;
+	width: 100%;
+
+	.link-icon {
+		background: $color-green;
+		display: block;
+		float: right;
+		height: 100%;
+		padding: 12px 15px;
+		position: absolute;
+		right: 0;
+	}
+
+	&:active,
+	&:focus,
+	&:hover {
+		background-color: darken($color-green, 5%);
+		color: $color-white;
+
+		.link-icon {
+			background-color: darken($color-green, 5%);
+		}
+	}
+
+	.link {
+		display: block;
+		float: left;
+		line-height: 1.2;
+		margin-left: 0;
+		padding: 18px 76px 18px 23px;
+
+		.small {
+			font-weight: 300;
+			margin-top: 10px;
+		}
+	}
+
+	img {
+		height: 30px;
+		width: 30px;
+	}
 }
 
 .back-to-top {
-  border-radius: 4px;
-  bottom: 15px;
-  box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
-  display: none;
-  font-size: 0.8rem;
-  font-weight: 500;
-  height: 60px;
-  padding: 8px 15px 5px 15px;
-  position: fixed;
-  right: 15px;
-  text-align: center;
-  width: 50px;
-  z-index: 100;
-
-  svg {
-    fill: $color-teal;
-  }
-
-  &:link,
-  &:visited {
-    background: $color-gray-light;
-    color: $color-teal;
-    text-decoration: none;
-  }
-
-  &:active,
-  &:focus,
-  &:hover {
-    background-color: $color-teal;
-    color: white;
-
-    svg {
-      fill: $color-white;
-    }
-  }
+	border-radius: 4px;
+	bottom: 15px;
+	box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
+	display: none;
+	font-size: 0.8rem;
+	font-weight: 500;
+	height: 60px;
+	padding: 8px 15px 5px 15px;
+	position: fixed;
+	right: 15px;
+	text-align: center;
+	width: 50px;
+	z-index: 100;
+
+	svg {
+		fill: $color-teal;
+	}
+
+	&:link,
+	&:visited {
+		background: $color-gray-light;
+		color: $color-teal;
+		text-decoration: none;
+	}
+
+	&:active,
+	&:focus,
+	&:hover {
+		background-color: $color-teal;
+		color: white;
+
+		svg {
+			fill: $color-white;
+		}
+	}
 }
 
 .btn.btn-selected {
-  text-transform: uppercase;
+	text-transform: uppercase;
 }
 
 a.btn-download-measures {
-  color: $color-teal;
-  text-decoration: none;
+	color: $color-teal;
+	text-decoration: none;
 
-  &:hover,
-  &:active {
-    text-decoration: underline;
-  }
+	&:hover,
+	&:active {
+		text-decoration: underline;
+	}
 }
 
 span {
-  &.doc-label {
-    border-radius: 15px;
-    color: #fff;
-    font-size: 0.8rem;
-    font-weight: 500;
-    padding: 3px 12px;
-    text-align: center;
-    text-transform: uppercase;
-
-    &.doc-label-pdf {
-      background-color: $color-navy;
-    }
-
-    &.doc-label-doc {
-      background-color: $color-green;
-    }
-
-    &.doc-label-zip {
-      background-color: $color-magenta;
-    }
-  }
+	&.doc-label {
+		border-radius: 15px;
+		color: #fff;
+		font-size: 0.8rem;
+		font-weight: 500;
+		padding: 3px 12px;
+		text-align: center;
+		text-transform: uppercase;
+
+		&.doc-label-pdf {
+			background-color: $color-navy;
+		}
+
+		&.doc-label-doc {
+			background-color: $color-green;
+		}
+
+		&.doc-label-zip {
+			background-color: $color-magenta;
+		}
+	}
 }
 
 .auth-fill-btn {
-  background-color: $color-teal;
-  border: solid $color-teal 2px;
-  border-radius: 30px;
-  color: $color-white;
-  cursor: pointer;
-  display: block;
-  font-size: 13px;
-  font-weight: 500;
-  height: 54px;
-  line-height: 54px;
-  margin: 10px auto;
-  text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
-  width: 180px;
-
-  @include breakpoint(xs) {
-    min-width: 200px;
-    padding: 0 25px;
-  }
-
-  @include breakpoint(sm) {
-    margin: 10px 0;
-    min-width: 200px;
-    padding: 0 25px;
-  }
-
-  @include breakpoint(md) {
-    margin: 15px 0;
-    min-width: 200px;
-    padding: 0 25px;
-  }
-
-  &:focus,
-  &:hover {
-    background-color: $color-white;
-    border: solid $color-teal 2px;
-    color: $color-teal;
-  }
+	background-color: $color-teal;
+	border: solid $color-teal 2px;
+	border-radius: 30px;
+	color: $color-white;
+	cursor: pointer;
+	display: block;
+	font-size: 13px;
+	font-weight: 500;
+	height: 54px;
+	line-height: 54px;
+	margin: 10px auto;
+	text-align: center;
+	text-decoration: none;
+	text-transform: uppercase;
+	width: 180px;
+
+	@include breakpoint(xs) {
+		min-width: 200px;
+		padding: 0 25px;
+	}
+
+	@include breakpoint(sm) {
+		margin: 10px 0;
+		min-width: 200px;
+		padding: 0 25px;
+	}
+
+	@include breakpoint(md) {
+		margin: 15px 0;
+		min-width: 200px;
+		padding: 0 25px;
+	}
+
+	&:focus,
+	&:hover {
+		background-color: $color-white;
+		border: solid $color-teal 2px;
+		color: $color-teal;
+	}
 }
 
 .auth-ghost-btn {
-  align-items: center;
-  background-color: $color-white;
-  border: solid $color-teal 2px;
-  border-radius: 30px;
-  color: $color-teal;
-  cursor: pointer;
-  display: flex;
-  font-size: 13px;
-  font-weight: 500;
-  height: 54px;
-  justify-content: center;
-  line-height: 15px;
-  margin: 10px 0;
-  text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
-  width: 180px;
-
-  @include breakpoint(xs) {
-    min-width: 200px;
-    padding: 0 25px;
-  }
-
-  @include breakpoint(sm) {
-    margin: 10px 0;
-    min-width: 200px;
-    padding: 0 25px;
-  }
-
-  @include breakpoint(md) {
-    margin: 15px 0;
-    min-width: 200px;
-    padding: 0 25px;
-  }
-
-  &:focus,
-  &:hover {
-    background-color: $color-teal;
-    border: solid $color-teal 2px;
-    color: $color-white;
-  }
+	align-items: center;
+	background-color: $color-white;
+	border: solid $color-teal 2px;
+	border-radius: 30px;
+	color: $color-teal;
+	cursor: pointer;
+	display: flex;
+	font-size: 13px;
+	font-weight: 500;
+	height: 54px;
+	justify-content: center;
+	line-height: 15px;
+	margin: 10px 0;
+	text-align: center;
+	text-decoration: none;
+	text-transform: uppercase;
+	width: 180px;
+
+	@include breakpoint(xs) {
+		min-width: 200px;
+		padding: 0 25px;
+	}
+
+	@include breakpoint(sm) {
+		margin: 10px 0;
+		min-width: 200px;
+		padding: 0 25px;
+	}
+
+	@include breakpoint(md) {
+		margin: 15px 0;
+		min-width: 200px;
+		padding: 0 25px;
+	}
+
+	&:focus,
+	&:hover {
+		background-color: $color-teal;
+		border: solid $color-teal 2px;
+		color: $color-white;
+	}
 }
 
 .auth-disabled-btn[disabled] {
-  background-color: $color-gray-very-light;
-  border: solid $color-gray-very-light 2px;
-  border-radius: 30px;
-  color: $color-gray-darker-medium;
-  cursor: not-allowed;
-  display: block;
-  font-size: 13px;
-  font-weight: 500;
-  height: 54px;
-  line-height: 15px;
-  margin: 10px auto;
-  text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
-  width: 180px;
-
-  @include breakpoint(xs) {
-    min-width: 200px;
-    padding: 0 25px;
-  }
-
-  @include breakpoint(sm) {
-    margin: 10px 0;
-    min-width: 200px;
-    padding: 0 25px;
-  }
-
-  @include breakpoint(md) {
-    margin: 15px 0;
-    min-width: 200px;
-    padding: 0 25px;
-  }
+	background-color: $color-gray-very-light;
+	border: solid $color-gray-very-light 2px;
+	border-radius: 30px;
+	color: $color-gray-darker-medium;
+	cursor: not-allowed;
+	display: block;
+	font-size: 13px;
+	font-weight: 500;
+	height: 54px;
+	line-height: 15px;
+	margin: 10px auto;
+	text-align: center;
+	text-decoration: none;
+	text-transform: uppercase;
+	width: 180px;
+
+	@include breakpoint(xs) {
+		min-width: 200px;
+		padding: 0 25px;
+	}
+
+	@include breakpoint(sm) {
+		margin: 10px 0;
+		min-width: 200px;
+		padding: 0 25px;
+	}
+
+	@include breakpoint(md) {
+		margin: 15px 0;
+		min-width: 200px;
+		padding: 0 25px;
+	}
 }