@import './media-queries';

$border-color: #cccccc;
$button-color: #76c7aa;
$color-banner-bg: #e8e3eb;
$color-action: #6714bd;
$color-button-bg: lighten($color-action, 9%);
$color-action-minor: desaturate(lighten($color-action, 30%), 40%);
$color-error: #990000;
$color-dangerous: #d40000;
$color-dangerous-minor: desaturate($color-dangerous, 20%);
$color-text: #000000;
$color-text-minor: lighten($color-text, 40%);
$color-text-subheading: #a20e83;
$color-text-placeholder: #aaaaaa;
$color-bg: #ffffff;
$color-bg-overlay: rgba(200, 200, 200, 0.9);
$color-shadow: rgba(0, 0, 0, 0.3);
$color-highlight: #93c6ff;
$color-bg2: #f4f4f4;
$color-bg3: #131313;
$color-action-bg: #f9f4ff;
$color-correct: #38ae24;
$color-incorrect: #c21f00;
$color-alt-correct: #ffc802;
$color-unchosen-correct: #808080;
$color-transparent: rgba(0, 0, 0, 0);
$color-browser-focus: #5991ca;
$color-comment: #ffd400;
$color-preview: #0d4fa7;
$color-reward: #ffe65d;
$color-reward-text: #947d00;
$color-obojobo-blue: #0d4fa7;
$color-preview: #af1b5c;

$size-spacing-vertical-big: 40px;
$size-spacing-vertical-half: $size-spacing-vertical-big / 2;
$size-spacing-vertical-internal: $size-spacing-vertical-half / 2;

$box-shadow-focus: 0 0 3px 3px $color-browser-focus;
$box-shadow-overlay: 0 2px 2px $color-shadow;

// default for obobjobo
// in documents: headers, buttons, dialogs
/* stylelint-disable-next-line value-keyword-case */
$font-default: 'Libre Franklin', Arial, sans-serif;

// use for larger blocks of text
// in a document: all content
$font-text: 'Noto Serif', serif;
// math or code text
$font-monospace: 'Roboto Mono', monospace;
$font-size: 14.25pt;

$dimension-collection-icon: 90px;
$dimension-module-icon: 90px;
$dimension-avatar-icon: 90px;
$dimension-padding: 1.5em;
$dimension-width: 42em;
$dimension-nav-height: 3.75em;
$dimension-rounded-radius: 0.25em;

@mixin text-input() {
	box-sizing: border-box;
	font-family: $font-monospace;
	font-size: 0.7em;
	padding: 0.4em;
}

@mixin with-bottom-border() {
	position: relative;
	padding-bottom: $size-spacing-vertical-internal;
	margin-bottom: $size-spacing-vertical-half;

	// border line between items
	&::after {
		position: absolute;
		bottom: 0;
		left: 8%;
		margin: 0 auto;
		border-bottom: 1px solid $border-color;
		content: '';
		display: block;
		width: 84%;
	}

	// disable border line on last item
	&:last-child::after {
		display: none;
	}
}

@mixin select-input() {
	font-family: $font-default;
	border-radius: $dimension-rounded-radius;
	background-color: $color-bg;
	padding: 0.7em 3em 0.7em 0.5em;
	appearance: none;
	//stylelint-disable-next-line declaration-colon-newline-after, value-list-comma-newline-after
	background-image: linear-gradient(45deg, transparent 50%, gray 50%),
		linear-gradient(135deg, gray 50%, transparent 50%);
	//stylelint-disable-next-line declaration-colon-newline-after, value-list-comma-newline-after
	background-position: calc(100% - 1.5em) 1.1em, calc(100% - 1.1em) 1.1em, calc(100% - 2.5em) 0.5em;
	background-size: 0.4em 0.4em, 0.4em 0.4em, 0.1em 1.5em;
	background-repeat: no-repeat;
	cursor: pointer;
}

html,
body {
	margin: 0;
	padding: 0;
	font-family: $font-default;
	font-size: 1.1em;

	&.ReactModal__Body--open {
		overflow: hidden;
	}
}