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

/* @combine .spectrum.spectrum--legacy */

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

@container style(--system: legacy) {
	.spectrum-Button {
		--spectrum-button-background-color-default: var(--spectrum-gray-75);
		--spectrum-button-background-color-hover: var(--spectrum-gray-200);
		--spectrum-button-background-color-down: var(--spectrum-gray-300);
		--spectrum-button-background-color-focus: var(--spectrum-gray-200);

		&.spectrum-Button--primary {
			--spectrum-button-content-color-default: var(--spectrum-white);
			--spectrum-button-content-color-hover: var(--spectrum-white);
			--spectrum-button-content-color-down: var(--spectrum-white);
			--spectrum-button-content-color-focus: var(--spectrum-white);

			&.spectrum-Button--outline {
				--spectrum-button-background-color-hover: var(--spectrum-gray-300);
				--spectrum-button-background-color-down: var(--spectrum-gray-400);
				--spectrum-button-background-color-focus: var(--spectrum-gray-300);
			}
		}

		&.spectrum-Button--secondary {
			--spectrum-button-background-color-default: var(--spectrum-gray-200);
			--spectrum-button-background-color-hover: var(--spectrum-gray-300);
			--spectrum-button-background-color-down: var(--spectrum-gray-400);
			--spectrum-button-background-color-focus: var(--spectrum-gray-300);

			&.spectrum-Button--outline {
				--spectrum-button-background-color-hover: var(--spectrum-gray-300);
				--spectrum-button-background-color-down: var(--spectrum-gray-400);
				--spectrum-button-background-color-focus: var(--spectrum-gray-300);

				--spectrum-button-border-color-default: var(--spectrum-gray-300);
				--spectrum-button-border-color-down: var(--spectrum-gray-500);
			}
		}

		&.spectrum-Button--staticWhite {
			--spectrum-button-background-color-default: var(--spectrum-transparent-white-800);
			--spectrum-button-background-color-hover: var(--spectrum-transparent-white-900);
			--spectrum-button-background-color-down: var(--spectrum-transparent-white-900);
			--spectrum-button-background-color-focus: var(--spectrum-transparent-white-900);

			&.spectrum-Button--outline {
				--spectrum-button-background-color-hover: var(--spectrum-transparent-white-300);
				--spectrum-button-background-color-down: var(--spectrum-transparent-white-400);
				--spectrum-button-background-color-focus: var(--spectrum-transparent-white-300);

				--spectrum-button-content-color-default: var(--spectrum-white);
				--spectrum-button-content-color-hover: var(--spectrum-white);
				--spectrum-button-content-color-down: var(--spectrum-white);
				--spectrum-button-content-color-focus: var(--spectrum-white);

				--spectrum-button-border-color-default: var(--spectrum-transparent-white-800);
				--spectrum-button-border-color-hover: var(--spectrum-transparent-white-900);
				--spectrum-button-border-color-down: var(--spectrum-transparent-white-900);
				--spectrum-button-border-color-focus: var(--spectrum-transparent-white-900);
			}

			&.spectrum-Button--secondary {
				--spectrum-button-background-color-default: var(--spectrum-transparent-white-200);
				--spectrum-button-background-color-hover: var(--spectrum-transparent-white-300);
				--spectrum-button-background-color-down: var(--spectrum-transparent-white-400);
				--spectrum-button-background-color-focus: var(--spectrum-transparent-white-300);

				--spectrum-button-content-color-default: var(--spectrum-white);
				--spectrum-button-content-color-hover: var(--spectrum-white);
				--spectrum-button-content-color-down: var(--spectrum-white);
				--spectrum-button-content-color-focus: var(--spectrum-white);

				&.spectrum-Button--outline {
					--spectrum-button-border-color-default: var(--spectrum-transparent-white-300);
					--spectrum-button-border-color-hover: var(--spectrum-transparent-white-400);
					--spectrum-button-border-color-down: var(--spectrum-transparent-white-500);
					--spectrum-button-border-color-focus: var(--spectrum-transparent-white-400);

					--spectrum-button-background-color-default: var(--spectrum-transparent-white-800);
					--spectrum-button-background-color-hover: var(--spectrum-transparent-white-300);
					--spectrum-button-background-color-down: var(--spectrum-transparent-white-400);
					--spectrum-button-background-color-focus: var(--spectrum-transparent-white-300);
				}
			}
		}

		&.spectrum-Button--staticBlack {
			--spectrum-button-background-color-default: var(--spectrum-transparent-black-800);
			--spectrum-button-background-color-hover: var(--spectrum-transparent-black-900);
			--spectrum-button-background-color-down: var(--spectrum-transparent-black-900);
			--spectrum-button-background-color-focus: var(--spectrum-transparent-black-900);

			&.spectrum-Button--outline {
				--spectrum-button-background-color-hover: var(--spectrum-transparent-black-300);
				--spectrum-button-background-color-down: var(--spectrum-transparent-black-400);
				--spectrum-button-background-color-focus: var(--spectrum-transparent-black-300);

				--spectrum-button-content-color-default: var(--spectrum-black);
				--spectrum-button-content-color-hover: var(--spectrum-black);
				--spectrum-button-content-color-down: var(--spectrum-black);
				--spectrum-button-content-color-focus: var(--spectrum-black);

				--spectrum-button-border-color-default: var(--spectrum-transparent-black-400);
				--spectrum-button-border-color-hover: var(--spectrum-transparent-black-500);
				--spectrum-button-border-color-down: var(--spectrum-transparent-black-600);
				--spectrum-button-border-color-focus: var(--spectrum-transparent-black-500);
			}

			&.spectrum-Button--secondary {
				--spectrum-button-background-color-default: var(--spectrum-transparent-black-200);
				--spectrum-button-background-color-hover: var(--spectrum-transparent-black-300);
				--spectrum-button-background-color-down: var(--spectrum-transparent-black-400);
				--spectrum-button-background-color-focus: var(--spectrum-transparent-black-300);

				--spectrum-button-content-color-default: var(--spectrum-black);
				--spectrum-button-content-color-hover: var(--spectrum-black);
				--spectrum-button-content-color-down: var(--spectrum-black);
				--spectrum-button-content-color-focus: var(--spectrum-black);

				&.spectrum-Button--outline {
					--spectrum-button-border-color-default: var(--spectrum-transparent-black-300);
					--spectrum-button-border-color-hover: var(--spectrum-transparent-black-400);
					--spectrum-button-border-color-down: var(--spectrum-transparent-black-500);
					--spectrum-button-border-color-focus: var(--spectrum-transparent-black-400);

					--spectrum-button-background-color-default: var(--spectrum-transparent-black-800);
					--spectrum-button-background-color-hover: var(--spectrum-transparent-black-300);
					--spectrum-button-background-color-down: var(--spectrum-transparent-black-400);
					--spectrum-button-background-color-focus: var(--spectrum-transparent-black-300);
				}
			}
		}
	}
}
