//   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

@use '../../../../styles/base/typography';

.login-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;

	.logo-section {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		width: 95%;
		background: linear-gradient(to left, transparent, var(--logo-section-ribbon), transparent);
		padding: 60px 30px;
		text-align: center;

		img {
			max-width: 100%;
			margin-bottom: 10px;
		}

		.login-title {
			font-size: 2.5rem;
			line-height: 3.359rem;
			font-weight: 400;
			color: var(--login-title);
		}

		.login-subtitle {
			@include typography.paragraph-semibold-p3-default-emphasis;
			color: var(--foregrounds-550);
		}
	}

	.login-section {
		margin-top: 20px;
		width: 100%;
		max-width: 400px;
	}
}
