@import './variables';
@import './mixins';

.js-focus-visible :focus:not(.focus-visible) {
	box-shadow: none !important;
	outline: none;
}

html {
	touch-action: manipulation;
}

label {
  font-weight: 600;
}

a, button:not([disabled]), .cursor-pointer {
	cursor: pointer;
}

.link-plain {
	&:hover, &:active {
		text-decoration: none;
	}
}

button {
	margin: 0;
	padding: 0;
	color: inherit;
	background: none;
	border: none;
	appearance: none;
}

h1, h2 {
	color: $headers-color;
}

.pointer-none {
	pointer-events: none;
}

.unselectable, .sno {
	user-select: none;
}

.pixelart {
	image-rendering: pixelated;
}

.text-strike {
	text-decoration: line-through;
}

.text-dev {
	color: lighten($dev, 20%);
}

.text-mod {
	color: lighten($mod, 10%);
}

.text-safe {
	color: $safe;
}

.text-unsafe {
	color: $unsafe;
}

.text-fading {
	color: mix($body-color, $text-muted, 40%);
}

.text-faded {
	opacity: 0.6;
}

.text-wrap {
	white-space: normal;
}

.text-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
}

.text-slashed {
	text-decoration: line-through;
}

.text-party {
	color: $party-color;
}

.text-friends {
	color: $friends-color;
}

.text-whisper {
	color: $chat-whisper;
}

.lock-box {
	float: right;
	margin-right: -20px;
}

character-preview {
	margin: auto;
	width: 400px;
	height: 400px;
	border-radius: $border-radius-lg;

	@include media-breakpoint-down(sm) {
		width: 280px;
		height: 280px;
	}

	.popover &, .tooltip & {
		width: 200px;
		height: 200px;
	}
}

.text-large {
	font-size: 16px;
}

.list-rules {
	color: theme-color(danger) !important;
	font-weight: 600;
}

.popover.popover-wide {
	max-width: none;
}

.accessories-tabset .nav-link {
	@include media-breakpoint-down(lg) {
		padding-left: 10px;
		padding-right: 10px;
	}
}

.supporter-1 {
	color: $supporter-1 !important;
}

.supporter-2 {
	color: $supporter-2 !important;
}

.supporter-3 {
	color: $supporter-3 !important;
}

// flags

@mixin flag-3($a, $b, $c) {
	background: linear-gradient(to bottom, $a 0%, $a 32%, $b 32%, $b 68%, $c 68%, $c 100%);
}

@mixin flag-3h($a, $b, $c) {
	background: linear-gradient(to right, $a 0%, $a 32%, $b 32%, $b 68%, $c 68%, $c 100%);
}

.flag {
	display: inline-block;
	width: $flag-size * 1.05;
	height: $flag-size;
	background: #666;
	border-radius: 100%;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
	margin-bottom: -3px;
}

.flag-ru {
	@include flag-3($flag-white, $flag-blue, $flag-red);
}

.flag-mx {
	position: relative;
	@include flag-3h(#008158, white, #e40f27);
	
	&::after {
		content: '•';
		color: #be915d;
		position: absolute;
		left: 6px;
		top: -5px;
		font-size: 18px;
	}
}

$argentina-blue: #74acdf;

.flag-ar {
	position: relative;
	@include flag-3($argentina-blue, $flag-white, $argentina-blue);
	
	&::after {
		content: '•';
		color: #f7b50d;
		position: absolute;
		left: 6px;
		top: -5px;
		font-size: 18px;
	}
}

.flag-sp {
	position: relative;
	background: linear-gradient(to bottom,
		$flag-red 0%, $flag-red 27%,
		$flag-yellow 27%, $flag-yellow 73%,
		$flag-red 73%, $flag-red 100%);
}

.flag-pr {
	position: relative;
	background: linear-gradient(to right,
		$flag-green 0%, $flag-green 40%,
		$flag-red 40%, $flag-red 100%);
}

.flag-br {
	position: relative;
	background: $flag-green;

	&::before {
		content: '◆';
		color: $flag-yellow;
		position: absolute;
		left: 0px;
		top: -8px;
		font-size: 23px;
		transform: scaleY(0.8);
	}
		
	&::after {
		content: '•';
		color: #003bb1;
		position: absolute;
		left: 5px;
		top: -11px;
		font-size: 26px;
	}
}

.flag + .flag {
	margin-left: -16px;
}

.modal-frame {
	width: 100%;
	height: 500px;
	border: 0;
	border-radius: $border-radius-lg;
}

// font size fixes

.nav-pills, .nav-tabs {
	font-size: 16px;
}

.is-mobile action-button, action-button.draggable-dragging {
	.shortcut {
		display: none;
	}
}

.actions-modal-opened {
	$action-bar-space: 80px;	
	
	.modal-backdrop, .modal {
		bottom: $action-bar-space;
		height: auto;
	}
	
	.modal-dialog {
		@media screen and (max-height: 600px) {
			height: auto;
		}

		align-items: flex-end;
		padding-bottom: 20px;
	}
}

.translucent-modals .modal-content {
	opacity: 0.5;
}

.d-none-for-low-height {
	@media screen and (max-height: 600px) {
		display: none !important;
	}
}

.tooltip.tooltip-desc .tooltip-inner {
	max-width: 250px;
}
