/*!
 * 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.
 */

.spectrum-SplitView {
	--spectrum-splitview-background-color: var(--spectrum-gray-75);
	--spectrum-splitview-handle-background-color: var(--spectrum-gray-200);
	--spectrum-splitview-gripper-border-radius: 2px;
	--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: translateY(-50%);
	touch-action: none;
	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));
}
.spectrum-SplitView-gripper:before {
	background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
}
.spectrum-SplitView-splitter {
	position: relative;
	background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
	-webkit-user-select: none;
	user-select: none;
	inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
	block-size: 100%;
	z-index: 1;
}
.spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before,
.spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: calc(50% - 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%;
}
.spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper {
	inset-inline-start: 0;
}
.spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper {
	inset-inline-end: 0;
	inset-inline-start: auto;
}
.spectrum-SplitView-splitter.is-draggable.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-splitter.is-draggable.is-hovered .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-splitter.is-draggable.is-hovered .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)));
}
@media (hover: hover) {
	.spectrum-SplitView-splitter.is-draggable:hover {
		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-splitter.is-draggable: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-splitter.is-draggable: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)));
	}
}
.spectrum-SplitView-splitter.is-draggable.is-active,
.spectrum-SplitView-splitter.is-draggable: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-splitter.is-draggable.is-active .spectrum-SplitView-gripper,
.spectrum-SplitView-splitter.is-draggable:active .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)));
}
.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper:before,
.spectrum-SplitView-splitter.is-draggable:active .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)));
}
.spectrum-SplitView-splitter.is-draggable:focus {
	outline: none;
}
.spectrum-SplitView-splitter.is-draggable: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-splitter.is-draggable:focus-visible .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-splitter.is-draggable:focus-visible .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--vertical .spectrum-SplitView-pane {
	block-size: auto;
	inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
}
.spectrum-SplitView--vertical .spectrum-SplitView-gripper {
	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(var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)) * -1));
	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));
	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--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--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper,
.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper {
	inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
}
.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before,
.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before {
	inset-block-start: calc(var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)) - 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--vertical .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--vertical .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;
	}
}