/*!
 * Copyright 2024 Adobe. All rights reserved.
 *
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@import "./themes/spectrum-two.css";

.spectrum-SplitView {
	--spectrum-splitview-vertical-width: 100%;
	--spectrum-splitview-vertical-gripper-width: 50%;
	--spectrum-splitview-vertical-gripper-outer-width: 100%;
	--spectrum-splitview-vertical-gripper-reset: 0;

	--spectrum-splitview-content-color: var(--spectrum-body-color);

	--spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400);
	--spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800);
	--spectrum-splitview-handle-background-color-focus: var(--spectrum-focus-indicator-color);
	--spectrum-splitview-handle-width: var(--spectrum-border-width-200);

	--spectrum-splitview-gripper-width: var(--spectrum-border-width-400);
	--spectrum-splitview-gripper-height: 16px;
	--spectrum-splitview-gripper-border-width-horizontal: 3px;
	--spectrum-splitview-gripper-border-width-vertical: var(--spectrum-border-width-400);

	display: flex;
	overflow: hidden;
}

.spectrum-SplitView-pane {
	block-size: 100%;
	background-color: var(--mod-splitview-background-color, var(--spectrum-splitview-background-color));
	color: var(--mod-splitview-content-color, var(--spectrum-splitview-content-color));
}

.spectrum-SplitView-gripper {
	content: "";
	display: block;
	position: absolute;
	border-style: solid;
	border-radius: var(--mod-splitview-gripper-border-radius, var(--spectrum-splitview-gripper-border-radius));
	border-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));

	inset-block-start: 50%;
	transform: translate(0, -50%);

	/* Prevent touch-action on handle */
	touch-action: none;

	/* half of (width + horizontal border - handle width) * -1 (for negative opposite) */
	inset-inline-start: calc(((var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) + (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) - var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))) / 2) * -1);
	inline-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width));
	block-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height));
	border-block-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical));
	border-inline-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal));

	&::before {
		background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
	}
}

.spectrum-SplitView-splitter {
	/* Contains the gripper */
	position: relative;

	background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));

	/* Prevent text selection while dragging */
	user-select: none;

	inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
	block-size: 100%;
	z-index: 1;

	&.is-collapsed-start,
	&.is-collapsed-end {
		/* make the center line of the gripper */
		.spectrum-SplitView-gripper::before {
			content: "";
			position: absolute;

			inset-block-start: 0;
			inset-inline-start: calc(50% - calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2));
			inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
			block-size: 100%;
		}
	}

	&.is-collapsed-start {
		.spectrum-SplitView-gripper {
			inset-inline-start: 0;
		}
	}

	&.is-collapsed-end {
		.spectrum-SplitView-gripper {
			inset-inline-end: 0;
			inset-inline-start: auto;
		}
	}

	&.is-draggable {
		&:hover,
		&.is-hovered {
			background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));

			.spectrum-SplitView-gripper {
				border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
			}

			.spectrum-SplitView-gripper::before {
				background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
			}
		}

		&:active,
		&.is-active {
			background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));

			.spectrum-SplitView-gripper {
				border-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
			}

			/* Center line of gripper */
			.spectrum-SplitView-gripper::before {
				background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
			}
		}

		&:focus {
			outline: none;
		}

		&:focus-visible {
			outline: none;
			background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));

			.spectrum-SplitView-gripper {
				border-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
				box-shadow: 0 0 0 1px var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
			}

			.spectrum-SplitView-gripper::before {
				background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
			}
		}
	}
}

.spectrum-SplitView--vertical {
	flex-direction: column;

	.spectrum-SplitView-pane {
		block-size: auto;
		inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
	}

	.spectrum-SplitView-gripper {
		/* half of (height + vertical border - handle width) * -1 (for negative opposite) */
		inset-block-start: calc(((var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) + (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) - var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))) / 2) * -1);

		transform: translate(calc(-1 * var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width))), 0);
		inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
		inline-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height));
		block-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width));

		/* opposite of default border-width */
		border-block-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal));
		border-inline-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical));
	}

	.spectrum-SplitView-splitter {
		inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
		block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
	}

	.spectrum-SplitView-splitter.is-collapsed-start,
	.spectrum-SplitView-splitter.is-collapsed-end {
		.spectrum-SplitView-gripper {
			inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
		}

		/* make the center line of the gripper */
		.spectrum-SplitView-gripper::before {
			inset-block-start: calc(var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)) - calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2));
			inset-inline-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
			inline-size: var(--mod-splitview-vertical-gripper-outer-width, var(--spectrum-splitview-vertical-gripper-outer-width));
			block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
		}
	}

	.spectrum-SplitView-splitter.is-collapsed-start {
		.spectrum-SplitView-gripper {
			inset-block-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
		}
	}

	.spectrum-SplitView-splitter.is-collapsed-end {
		.spectrum-SplitView-gripper {
			inset-block-start: auto;
			inset-block-end: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
		}
	}
}

@media (forced-colors: active) {
	.spectrum-SplitView {
		--highcontrast-splitview-handle-background-color: CanvasText;
		--highcontrast-splitview-handle-background-color-hover: CanvasText;
		--highcontrast-splitview-handle-background-color-down: CanvasText;
		--highcontrast-splitview-handle-background-color-focus: Highlight;
	}
}
