/**
 * Adapted from termynal.js CSS version 0.0.1 by Ines Montani <ines@ines.io>,
 * licensed under MIT license.
 */

@font-face {
  font-family: 'Fira Mono';
  src: url( ../assets/fonts/FiraMono-Regular.otf );
}

.wp-block-codesue-terminal-block {
	--wp--default--terminal--block--color--background: #252a33;
	--wp--default--terminal--block--color--text: #eee;
	--wp--default--terminal--block--color--accent: #a2a2a2;

	width: 750px;
	max-width: 100%;
	background: var(--wp--default--terminal--block--color--background);
	color: var(--wp--default--terminal--block--color--text);
	font-size: 18px;
	font-family: 'Fira Mono', Consolas, Menlo, Monaco, 'Courier New', Courier, monospace;
	border-radius: 4px;
	padding: 75px 45px 35px;
	position: relative;
	-webkit-box-sizing: border-box;
			    box-sizing: border-box;
}

.wp-block-codesue-terminal-block::before {
	content: '';
	position: absolute;
	top: 15px;
	left: 15px;
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	/* A little hack to display the window buttons in one pseudo element. */
	background: #d9515d;
	-webkit-box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
			    box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
}

.wp-block-codesue-terminal-block::after {
	content: attr(title);
	position: absolute;
	color: var(--wp--default--terminal--block--color--accent);
	top: 5px;
	left: 0;
	width: 100%;
	text-align: center;
}

.wp-block-codesue-terminal-block p {
	display: block;
	line-height: 1;
}

.wp-block-codesue-terminal-block p::before {
	/* Set up defaults and ensure empty lines are displayed. */
	content: '';
	display: inline-block;
	vertical-align: middle;
}

.wp-block-codesue-terminal-block p.display-prompt::before {
	content: attr(prompt);
  margin-right: 0.75em;
	color: var(--wp--default--terminal--block--color--accent);
}

.wp-block-codesue-terminal-command-block.display-cursor::after {
  content: '▋';
  font-family: monospace;
  margin-left: 0.5em;
  -webkit-animation: blink 1s infinite;
          animation: blink 1s infinite;
}

/* Cursor animation */

@-webkit-keyframes blink {
    50% {
        opacity: 0;
    }
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}