@use "~admin-stylesheets/colors";
@use "~admin-stylesheets/breakpoints";

.nab-account-container {
	display: block;
	margin-top: 1em;

	@include breakpoints.break-large {
		display: grid;
		grid-column-gap: 1em;
		grid-template-columns: 1fr 1fr;
	}

	&__box {
		background: colors.$nab-background-white;
		border-radius: 2px;
		box-shadow: 0 1px 1px 0 colors.$nab-box-shadow;
		margin-bottom: 1em;

		height: fit-content;
		position: relative;
		transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);

		&:hover {
			box-shadow: 0 2px 10px 0 colors.$nab-box-shadow;
			background: colors.$nab-background-white;
			transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
		}
	}

	.components-notice-list {
		grid-column: 1/3;
		margin-bottom: 1em;
	}

	.nab-loading-animation {
		grid-column: 1/3;
		padding-top: 5em;
	}
}