import { css } from 'emotion';
import { mediaQueries } from '../../../utils/styles';

export const progressBarStyle = (scrollMode: boolean, palette: any) => {
	return css`
		left: 0;
		right: 0;

		-webkit-transition: height 0.3s;
		-moz-transition: height 0.3s;
		-ms-transition: height 0.3s;
		-o-transition: height 0.3s;
		transition: height 0.3s;

		background: ${palette.color10};
		z-index: 999;
		-webkit-box-shadow: 0px 0px 24px -1px rgba(0, 0, 0, 0.31);
		-moz-box-shadow: 0px 0px 24px -1px rgba(0, 0, 0, 0.31);
		box-shadow: 0px 0px 24px -1px rgba(0, 0, 0, 0.31);

		${mediaQueries.large(css`
			height: ${scrollMode ? '100px' : '160px'};
			position: static;
		`)};
		${mediaQueries.small(css`
			height: 100px;
			position: relative;
		`)};
	`;
};
export const stepsWrapperStyle = () => {
	return css`
		max-width: 1076px;
		padding-right: 40px !important;
		padding-left: 40px !important;
		margin-right: auto;

		margin-left: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	`;
};