/**
* 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(--ng-spacing-xl)) var(--nile-spacing-5xl, var(--ng-spacing-5xl));
		gap: var(--nile-spacing-xl, var(--ng-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, var(--ng-radius-md));
		border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient, var(--ng-colors-bg-primary)) 0%, var(--nile-hero-color-icon-bg-to-gradient, var(--ng-colors-bg-secondary)) 100%);
	}

	.hero__text {
		color: var(--nile-hero-text-color, var(--ng-colors-text-primary-900));
		font-size: var(--nile-hero-text-font-size, var(--ng-font-size-text-md));
		line-height: var(--nile-hero-text-line-height, var(--ng-line-height-text-md));
		font-style: normal;
		font-weight: var(--nile-hero-text-font-weight, var(--ng-font-weight-bold));
	}
`;

export default [styles];