//   Copyright 2024 Cisco Systems, Inc.
//
//   Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
//   See the License for the specific language governing permissions and
//   limitations under the License.
//
//   SPDX-License-Identifier: Apache-2.0

@forward './modelsmith-icons/modelsmith-icons-style.css';

$icons-primary: var(--primary-800);
$icons-accent: var(--accent-400);
$icons-complementary: var(--complementary-800);
$icons-gray: var(--foregrounds-600);
$icons-success: var(--success-500);
$icons-warn: var(--warning-500);
$icons-error: var(--error-500);
$icons-white: var(--backgrounds-50);
$icons-contrast: var(--icons-contrast);

@mixin icon-size($size) {
	font-size: $size;
	width: $size;
	height: $size;
}

.mat-icon {
	&.size-18 {
		@include icon-size(1.125rem); // 18px
	}

	&.size-20 {
		@include icon-size(1.25rem); // 20px
	}

	&.size-24 {
		@include icon-size(1.5rem); // 24 px
	}

	&.size-32 {
		@include icon-size(2rem); // 32 px
	}

	&.size-48 {
		@include icon-size(3rem); // 48 px
	}

	&.size-96 {
		@include icon-size(6rem); // 96 px
	}

	&.size-128 {
		@include icon-size(8rem); // 128 px
	}
}

mat-icon {
	font-size: 1.5rem;

	&.mat-primary {
		color: $icons-primary !important;
	}

	&.mat-complementary {
		color: $icons-complementary !important;
	}

	&.mat-gray {
		color: $icons-gray !important;
	}

	&.mat-white {
		color: $icons-white !important;
	}

	&.mat-contrast {
		color: $icons-contrast !important;
	}

	&.mat-accent {
		color: $icons-accent !important;
	}

	&.mat-success {
		color: $icons-success !important;
	}

	&.mat-warn {
		color: $icons-warn !important;
	}

	&.mat-error {
		color: $icons-error !important;
	}
}

button[disabled] {
	mat-icon {
		color: var(--backgrounds-800) !important;
	}
}

button[disabled] .scale-on-hover:hover {
	transform: none;
}

.scale-on-hover {
	cursor: pointer;
	transition: transform 0.3s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.scale-on-hover:hover {
	transform: scale(1.1);
	transform-origin: center;
}
