/* -------------------------------
  Icon
------------------------------- */
div.simple-banner {
	& > div.icon {
		position: relative;
		display: flex;
		justify-content: var(--sb-icon-align-h);
		align-items: var(--sb-icon-align-v);
		width: inherit;
		height: inherit;
		z-index: 4;
		margin: 0 auto;
		max-width: var(--file-line-width);
		transform: translate(0, 0);
		animation: fade-in 0.7s linear forwards, icon-anim 0.8s ease-out;
		will-change: transform, opacity;

		& > div {
			display: block;
			position: relative;
			width: var(--sb-icon-size-w);
			height: var(--sb-icon-size-h);
			background-color: var(--sb-icon-background);
			transform: translate(var(--sb-icon-offset-x), var(--sb-icon-offset-y));
			border-radius: var(--sb-icon-radius);
			border: var(--sb-icon-border) solid var(--background-primary);
			z-index: 2;
			overflow: hidden;

			&[data-type="text"]:after {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				inset: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
				text-transform: uppercase;
				content: var(--sb-icon-value);
				color: var(--text-normal);
				line-height: 0;
				font-size: var(--sb-icon-fontsize, inherit);
				user-select: none;
			}
			&[data-type="link"]:after {
				position: absolute;
				text-transform: uppercase;
				inset: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
				transform: translate(0, 0);
				content: '';
				background-image: var(--sb-icon-value);
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center;
				overflow: hidden;
			}
		}

		&.is-windows {
			& > div {
				&[data-type="text"]:after {
					top: calc(0% - (var(--sb-icon-fontsize) * 0.05));
				}
			}
		}
	}

	&.static > div.icon {
		animation: none;
	}
}

body {
	&.is-tablet {
		div.simple-banner > div.icon {
			left: calc(var(--size-4-2) * -1);
		}
	}

	&.is-phone {
		div.simple-banner > div.icon {
			left: auto;
		}
	}
}
