@import '../../client/css/defaults';

.repository--button.repository--multi-button {
	$size: 2.3em;
	$closed-width: 7.5em;
	$open-width: 9.7em;

	position: relative;
	border: 1px solid $color-action;
	min-height: 2.6em;
	padding-left: 3.5em;
	padding-top: 1em;
	padding-bottom: 1em;
	width: $closed-width;
	margin-right: $open-width - $closed-width;
	font-size: 0.65em;

	> button {
		font: inherit;
		border: none;
		background: none;
		color: inherit;
		padding: 0;
		display: block;
	}

	.child-buttons {
		display: none;
		position: absolute;
		font-size: 1.2em;
		top: 2.4em;
		width: calc(100% + 2px);
		left: 0;
		box-sizing: border-box;
		background: $color-bg;
		border: 1px solid darken($color-banner-bg, 10%);
		border-radius: 0 0 0.4em 0.4em;
		margin-left: -1px;
		padding: 1em 0.8em 0 0.8em;
		z-index: 100;
		border-top: none;

		button {
			display: block;
			margin-bottom: 0.7em;
			width: 100%;
		}
	}

	.icon {
		position: absolute;
		height: $size;
		width: $size;
		left: 0.3em;
		top: 50%;
		transform: translate(0, -50%);

		svg {
			position: relative;
			height: 100%;
			width: 100%;
			fill: white;
			stroke-width: 0.5em;
			stroke: $color-action;
		}

		&::after {
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			line-height: $size;
			content: '＋';
			color: $color-action;
		}
	}

	&.is-open,
	&:hover {
		color: $color-action;
		background-color: white;
		border: 1px solid darken($color-banner-bg, 10%);
		margin-right: 0;
		width: $open-width;

		.child-buttons {
			display: block;
		}
	}
}