@import "./node_modules/@waca/ca-ui-toolkit/essentials/essentials";

.welcomeViewWrapper{
    & div.welcomeTile {
		@include theming(background-color, ui-01);
		width: 290px;
		height: 290px;
		position: relative;
		padding-top: 24px;
		padding-bottom: 32px;
		padding-left: 24px;
		padding-right: 24px;
		cursor: pointer;
	}

	& div.welcomeTile:hover {
		@include theming(background-color, hover-ui);
	}

	& div.welcomeTile:focus {
		border: 1px solid;
		@include theming(border-color, focus, 1, !important);
		outline: none;
	}

	& div.welcomeTileWithBorder {
		border-right: 1px solid $gray1;
	}

	& div.welcomeTileTitle {
		margin-top: 48px;
		@include theming(color, text-02);
		font-size: 24px;
	}

	& div.welcomeTileDescription {
		margin-top: 24px;
		@include theming(color, ui-05);
		font-size: 14px;
	}

	& div.welcomeTileProgress {
		position: absolute;
		bottom: 32px;
		@include theming(color, text-02);
		font-size: 12px;
	}

	& svg.welcomeTileIcon {
		width: 48px;
		height: 48px;
    }

    @media only screen and (max-width: 940px) {
		& div.welcomeTile {
			position: relative;
			left: 0 !important;
			display: block;
		}

		& div.welcomeTileWithBorder {
			border-right: 0px;
			border-bottom: 1px solid $gray1;
		}
    }

    @media only screen and (max-width: 768px) {

		& div.welcomeTile {
			position: relative;
			left: 0 !important;
			display: block;
		}

		& div.welcomeTileWithBorder {
			border-right: 0px;
			border-bottom: 1px solid;
			@include theming(border-color, ui-03);
		}
	}
}

body.highcontrast{
	.welcomeViewWrapper {
		& div.welcomeTile {
			border: 1px solid;
			@include theming(border-color, ui-background);
		}
	}
}