/**
* 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';

/**
 * Hero CSS
 */
export const styles = css`

	:host {
		display:block;
		--nile-hero-transition-time:2000ms;
		-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));
	}

	.hero__header--collapsed{
		position:absolute;
		top:0;
		left:0;
		transition:var(--nile-hero-transition-time);
	}
	
	.hero__container {
		overflow:hidden;
		width:100%;
		position:relative;
		display:block;
  		transition: var(--nile-hero-transition-time);
	}

	.hero__container--collapsed{
		height: 67px;
		background-color: var(--nile-hero-collapsed-background);
	}

	.hero__container--expanded{
		height:var(--nile-hero-height);
		background:linear-gradient(180deg, var( --nile-hero-color-bg-from-gradient) 0%,  var( --nile-hero-color-bg-to-gradient) 100%);
	}

	.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__slot__container {
		height:var(--nile-hero-height);
		padding-left: var(--nile-spacing-5xl);
		display: flex;
		align-items: center;
		gap:var(--nile-spacing-spacing-xl);
		position: absolute;
		left: 0;
		bottom:0;
  		transition: var(--nile-hero-transition-time);
	}

	.hero__slot {
		display: flex;
		gap:var(--nile-spacing-spacing-xl);
	}

	.hero__img__container {
		height:var(--nile-hero-height);
		overflow:hidden;
		width:max-content;
		position: absolute;
		right: 0;
		bottom:0;
		transition:var(--nile-hero-transition-time);
	}

	.hero__img {
		object-fit:cover;
		height:var(--nile-hero-height);
		width:auto;
	}
`;

export default [styles];