// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Button styles


.ms-Button {
	@include ms-font-m;
	@include ms-u-normalize;
	background-color: $ms-color-neutralLighter;
	border: 1px solid $ms-color-neutralLighter;
	cursor: pointer;
	display: inline-block;
	height: 32px;
	min-width: 80px;
	padding: 4px 20px 6px;

	&:hover {
		background-color: $ms-color-neutralLight;
		border-color: $ms-color-neutralLight;
		outline: 1px solid transparent;

		.ms-Button-label {
			color: $ms-color-black;
		}
	}

	&:focus {
		background-color: $ms-color-neutralLight;
		border-color: $ms-color-themePrimary;
		outline: 1px solid transparent;

		.ms-Button-label {
			color: $ms-color-black;
		}
	}

	&:active {
		background-color: $ms-color-themePrimary;
		border-color: $ms-color-themePrimary;

		.ms-Button-label {
			color: $ms-color-white;
		}
	}

	&:disabled, 
	&.is-disabled {
		background-color: $ms-color-neutralLighter;
		border-color: $ms-color-neutralLighter;
		cursor: default;

		.ms-Button-label {
			color: $ms-color-neutralTertiary;
		}

		&:hover, 
		&:focus {
			outline: 0;
		}
	}
}

// Add space between adjacent buttons.
.ms-Button + .ms-Button {
	margin-left: 6px;
}

.ms-Button-label {
	color: $ms-color-neutralPrimary;
	font-family: $ms-font-family-semibold;
	font-size: $ms-font-size-m;
}

.ms-Button-icon, 
.ms-Button-description {
	display: none;
}


//== Modifier: Primary action button
//
.ms-Button.ms-Button--primary {
	background-color: $ms-color-themePrimary;
	border-color: $ms-color-themePrimary;

	.ms-Button-label {
		color: $ms-color-white;
	}

	&:hover {
		background-color: $ms-color-themeDark;
		border-color: $ms-color-themeDark;
	}

	&:focus {
		background-color: $ms-color-themeDark;
		border-color: $ms-color-themeDarker;
	}

	&:active {
		background-color: $ms-color-themePrimary;
		border-color: $ms-color-themePrimary;
	}

	&:disabled, 
	&.is-disabled {
		background-color: $ms-color-neutralLighter;
		border-color: $ms-color-neutralLighter;

		.ms-Button-label {
			color: $ms-color-neutralTertiary;
		}
	}
}


//== Modifier: Hero button
//
.ms-Button.ms-Button--hero {
  background-color: transparent;
  border: none;
  vertical-align: top;
  line-height: normal;

  .ms-Button-icon {
    color: $ms-color-themePrimary;
    display: inline-block;
    font-size: $ms-font-size-s;
    position: relative;
    top: -8px;
    text-align: center;

    .ms-Icon {
      border-radius: 18px;
      border: 1px solid $ms-color-themePrimary;
      height: 18px;
      line-height: 18px;
      width: 18px;
      font-size: $ms-font-size-s;
      margin: 0;
    }
  }

	.ms-Button-label {
		color: $ms-color-themePrimary;
		font-family: $ms-font-family-light;
		font-size: $ms-font-size-xl;
		position: relative;
		top: -5px;
		text-decoration: none;
	}

	&:hover, 
	&:focus {
		.ms-Button-icon {
			.ms-Icon {
				color: $ms-color-themeDark;
			}
		}

		.ms-Button-label {
			color: $ms-color-themeDarker;
		}
	}

	&:active {
		.ms-Button-icon {
			.ms-Icon {
				color: $ms-color-themePrimary;
			}
		}

		.ms-Button-label {
			color: $ms-color-themePrimary;
		}
	}

	&:disabled, 
	&.is-disabled {
		.ms-Button-icon {
			.ms-Icon {
				color: $ms-color-neutralTertiaryAlt;
			}
		}

		.ms-Button-label {
			color: $ms-color-neutralTertiary;
		}
	}
}


//== Modifier: Compound button
//
.ms-Button.ms-Button--compound {
	height: auto;
	min-height: 72px;
	max-width: 280px;
	padding: 20px;

	.ms-Button-label {
		display: block;
		font-family: $ms-font-family-semibold;
		position: relative;
		text-align: left;
		margin-top: -5px;
	}

	.ms-Button-description {
		color: $ms-color-neutralSecondary;
		display: block;
		font-family: $ms-font-family-regular;
		font-size: $ms-font-size-s;
		position: relative;
		text-align: left;
		top: 3px;
	}

	&:hover {
		.ms-Button-description { 
			color: $ms-color-neutralDark; 
		}
	}

	&:focus {
		border-color: $ms-color-themePrimary;
		background-color: $ms-color-neutralLighter;

		.ms-Button-label { 
			color: $ms-color-neutralPrimary; 
		}

		.ms-Button-description { 
			color: $ms-color-neutralSecondary; 
		}
	}

	&:active {
		background-color: $ms-color-themePrimary;

		.ms-Button-description, 
		.ms-Button-label { 
			color: $ms-color-white; 
		}
	}

	&:disabled, 
	&.is-disabled {
		.ms-Button-label, 
		.ms-Button-description {
			color: $ms-color-neutralTertiary;
		}

		&:focus,
		&:active {
			border-color: $ms-color-neutralLighter;
			background-color: $ms-color-neutralLighter;

			.ms-Button-label,
			.ms-Button-description {
				color: $ms-color-neutralTertiary; 
			}
		}
	}
}


//== Modifier: Command button
//
.ms-Button.ms-Button--command {
	background-color: transparent;
	border: none;
	height: 32px;
	line-height: 32px;
	min-width: 0;
	padding: 0 8px;
	text-align: left;
	font-size: $ms-font-size-m;
	
	.ms-Button-icon {
		color: $ms-color-neutralSecondary;
		display: inline-block;
		margin-right: 4px;
		position: relative;
	}

	.ms-Button-label {
		font-family: $ms-font-family-regular;
	}

	&:hover, 
	&:focus {
		.ms-Button-icon {
			color: $ms-color-neutralDark;
		}

		.ms-Button-label {
			color: $ms-color-black;
		}
	}

	&:active {
		.ms-Button-icon,
		.ms-Button-label {
			color: $ms-color-themePrimary;
		}
	}

	&:disabled, 
	&.is-disabled {
		.ms-Button-icon {
			color: $ms-color-neutralTertiaryAlt;
		}

		.ms-Button-label {
			color: $ms-color-neutralTertiary;
		}
	}
}

// Add space between adjacent command buttons.
.ms-Button.ms-Button--command + .ms-Button.ms-Button--command {
	margin-left: 14px;
}