@use "sass:color";
@use "../../scss/functions/rem";
@use "../../scss/calypso-colors";
@use "../../scss/typography";

// ==========================================================================
// Buttons
// ==========================================================================

.dops-button {
	background: calypso-colors.$white;
	box-shadow: inset 0 0 0 1.5px calypso-colors.$black;
	border: none;
	color: calypso-colors.$black;
	display: inline-block;
	margin: 0;
	outline: 0;
	overflow: hidden;
	font-size: typography.$font-body;
	line-height: 24px;
	text-overflow: ellipsis;
	text-decoration: none;
	vertical-align: top;
	box-sizing: border-box;
	border-radius: 4px;
	padding: 8px 24px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;

	&:hover {
		background: calypso-colors.$blue-grey-light;
		box-shadow: inset 0 0 0 1px calypso-colors.$black;
		color: calypso-colors.$gray-80;
	}

	&[disabled],
	&:disabled {
		color: color.adjust(calypso-colors.$gray, $lightness: 30%);
		background: calypso-colors.$white;
		border-color: color.adjust(calypso-colors.$gray, $lightness: 30%);
		cursor: default;
	}

	&:focus {
		background: calypso-colors.$white;
		border-color: calypso-colors.$black;
	}

	&.is-compact {
		padding: 4px 8px;
		line-height: 20px;
		font-size: typography.$font-body-extra-small;

		&:disabled {
			color: color.adjust(calypso-colors.$gray, $lightness: 30%);
		}

		.gridicon {
			top: 4px;
			margin-top: -8px;
		}
		// Make the left margin of the small plus icon visually less huge
		.gridicons-plus-small {
			margin-left: -4px;
		}
		// Reset the left margin if the button contains only the plus icon
		.gridicons-plus-small:last-of-type {
			margin-left: 0;
		}
		// Make plus icon nudged closer to adjacent icons
		// for add-people and add-plugin type buttons
		.gridicons-plus-small + .gridicon {
			margin-left: -4px;
		}

	}

	&.hidden {
		display: none;
	}

	.gridicon {
		position: relative;
		top: 4px;
		margin-top: -2px;
		margin-left: 10px;
		width: 18px;
		height: 18px;
	}
}

// Primary buttons
.dops-button.is-primary {
	background: calypso-colors.$black;
	box-shadow: inset 0 0 0 1.5px calypso-colors.$black;
	color: calypso-colors.$white;

	&:hover {
		background: var(--jp-gray-80);
	}

	&[disabled],
	&:disabled {
		color: #66c6e4 !important;
		background-color: #008ec2 !important;
		border-color: #008ec2 !important;
		box-shadow: none !important;
		text-shadow: none !important;
		cursor: default;
	}

	&.is-compact {
		color: calypso-colors.$white;
		white-space: nowrap;
	}
}

// Scary buttons
.dops-button.is-scary {
	color: calypso-colors.$alert-red;

	&:hover,
	&:focus {
		border-color: calypso-colors.$alert-red;
	}

	&:focus {
		box-shadow: 0 0 0 2px color.adjust(calypso-colors.$alert-red, $lightness: 20%);
	}

	&[disabled],
	&:disabled {
		color: color.adjust(calypso-colors.$alert-red, $lightness: 30%);
		border-color: color.adjust(calypso-colors.$gray, $lightness: 30%);
	}
}

.dops-button.is-primary.is-scary {
	background: calypso-colors.$alert-red;
	border-color: color.adjust(calypso-colors.$alert-red, $lightness: -20%);
	color: calypso-colors.$white;

	&:hover,
	&:focus {
		border-color: color.adjust(calypso-colors.$alert-red, $lightness: -40%);
	}

	&[disabled],
	&:disabled {
		background: color.adjust(calypso-colors.$alert-red, $lightness: 20%);
		border-color: color.mix(#fff, calypso-colors.$alert-red, 30%);
	}
}

.dops-button.is-borderless {
	box-shadow: none;
	color: color.adjust(calypso-colors.$gray, $lightness: -10%);
	padding-left: 0;
	padding-right: 0;

	&:hover {
		color: calypso-colors.$gray-dark;
	}

	&:focus {
		box-shadow: none;
	}

	.dops-accessible-focus &:focus {
		outline: thin dotted;
	}

	.gridicon {
		width: 24px;
		height: 24px;
		top: 6px;
	}

	&[disabled],
	&:disabled {
		color: color.adjust(calypso-colors.$gray, $lightness: 30%);
		background: calypso-colors.$white;
		cursor: default;

		&:active {
			border-width: 0;
		}
	}

	&.is-scary {
		color: calypso-colors.$alert-red;

		&:hover,
		&:focus {
			color: color.adjust(calypso-colors.$alert-red, $lightness: -20%);
		}

		&[disabled] {
			color: color.adjust(calypso-colors.$alert-red, $lightness: 30%);
		}
	}

	&.is-compact {
		background: transparent;
		border-radius: 0;

		.gridicon {
			width: 18px;
			height: 18px;
			top: 5px;
		}
	}
}

// ==========================================================================
// RNA buttons
// See https://wp.me/PbJqbW-5g
// ==========================================================================

.dops-button.is-rna {
	font-size: rem.convert(16px);
	line-height: rem.convert(24px);
	padding: rem.convert(8px) rem.convert(24px);
	letter-spacing: -0.01em;

	font-weight: 500;
	text-align: center;

	transition: all 150ms ease-in-out;

	&:disabled,
	&.disabled {
		background: var(--jp-gray) !important;
		border-color: transparent !important;
		box-shadow: none;
		color: var(--jp-gray-20) !important;

		pointer-events: none;
	}

	.gridicon {
		margin-inline-start: 0.25rem;
	}

	&.is-compact {
		font-size: rem.convert(12px);
		line-height: rem.convert(20px);
		padding: rem.convert(4px) rem.convert(8px);
	}
}

.dops-button:not(.is-primary).is-rna {
	background-color: var(--jp-white);
	border-color: var(--jp-black);
	color: var(--jp-black);

	&:hover,
	&:active {
		background: var(--jp-gray-0);
	}

	&:focus {
		box-shadow: none;
		outline: solid 2px var(--jp-black);
		outline-offset: -1px;
	}
}

.dops-button.is-primary.is-rna {
	background-color: var(--jp-black);
	border-color: var(--jp-black);
	color: var(--jp-white);

	-webkit-font-smoothing: antialiased;

	&:hover,
	&:active {
		background: var(--jp-gray-80);
		border-color: var(--jp-gray-80);
		color: var(--jp-white);
	}

	&:focus {
		box-shadow: none;
		outline: solid 1px var(--jp-black);
		outline-offset: 1px;
	}
}

a .components-external-link,
button .components-external-link {
	color: calypso-colors.$black;
}
