/**
* Copyright Aquera Inc 2023
*
* This source code is licensed under the BSD-3-Clause license found in the
* LICENSE file in the root directory of this source tree.
*/

import {css} from 'lit';

/**
 * HeroHeader CSS
 */
export const styles = css`
	
	:host {
		width:100%;
		display: flex;
		align-items: center;
		padding:var(--nile-spacing-xl) var(--nile-spacing-5xl);
		gap: var(--nile-spacing-xl);
		border-bottom: 1px solid rgb(234, 236, 240);
		-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
	}

	.icon__container {
		height: 32px;
		aspect-ratio: 1 / 1;
		place-items: center;
		display: grid;
		border-radius: var(--nile-radius-radius-xl);
		border: 1px solid var(--nile-colors-neutral-400);
		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
	}

	.hero__text {
		color: var(--nile-hero-text-color);
		font-size: var(--nile-hero-text-font-size);
		line-height: var(--nile-hero-text-line-height);
		font-style: normal;
		font-weight: var(--nile-hero-text-font-weight);
	}
`;

export default [styles];