@use "../010-settings/" as *;
@use "../030-tools/tool_multi-line-cap" as *;
@use "../030-tools/tool_typography-mixins" as type-mix;
@use "../030-tools/_tool_browser-prefixes" as *;
@use "../030-tools/tool_clearfix" as t-cl;
@use "../050-layout/layout_pull-float" as l-pull;
@use "../050-layout/basics" as *;

/*
* Hacks & Tweaks
*/

// This file SHOULD be empty.

/* HTML Utility - These should be added to semantic classes on component layer using mixins and extend */
.fullwidth {
	width: 100%;
}

.ilHidden {
	visibility: hidden;
}

.ilNoDisplay {
	display: none !important;
}

.ilDisplayBlock {
	display: block;
}

.ui-helper-hidden-accessible {
	position: absolute;
	left: -2000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ilClearFloat {
	@include t-cl.clearfix();
}

.pull-right,
.ilFloatRight {
    @include l-pull.pull-right();
}

.pull-left,
.ilFloatLeft {
    @include l-pull.pull-left();
}

.ilPositionRelative {
	position: relative;
}

.noMargin {
	margin: 0;
}

/* ----------------- invisible border ------------- */
div.invisible_border {
	margin: 15px;
}

.ilInvisibleBorder {
	padding: 15px;
}

/* ------------------ blind image - spacer gif --------------
   please use this style class always when using this blind image */
img.spacer {
	display: block;
}
/* End of HTML Utility for refactoring into mixins and extend */

/* Are these needed or is this covered by Standardpage? */
#ilAll {
	position: relative;
	height: auto !important;
	min-height: calc(unquote("100% - 1px"));
	margin: 0 auto;
}

div#minheight {
	height: 180px;
	clear: both;
	}

.ilContainerWidth {
	max-width: 1400px;
	padding: 0 30px;
	@media only screen and (max-width: $il-grid-float-breakpoint-max) {
		padding: 0 15px;
	}
}

/* see #27399 (should be finally tackled in PLR2) */
div.ilContentFixed {
	padding-bottom: 60px;
}

//please move to template/default/scss/modules/Test when created
div.ilc_Mob img {
	@media only screen and (max-width: $il-grid-float-breakpoint-max) {
		height: auto !important;
	}
}

// is this really in use?
div.input {
	border: 1px solid $il-main-border-dark-color;
	padding: 3px;
	text-decoration: none;
	font-size: $il-font-size-small;
	background-color: white;
	overflow: auto;
}
div.input:focus {
	border-color: $il-focus-color;
}

// needed? solve with tools?
.registration {
    margin: 5px auto 0;
    width: 700px;
}

// used where?
input[type=text].numeric {
    text-align: right;
}

// seems to be hidden in html template
div.il_TreeIcons {
	padding: 15px 15px 0 0;
	margin: 0;
	float: right;
}

// too general
.glyphicon-ok {
    font-size: $il-font-size-small;
	text-align: center;
}

// part of kitchen sink documentation UI
// Horizontal Scroll Bar for Code, see: #27132
.code-container{
	display: grid;
}

// not in use?
//## Variables used to style the ILIAS input fields (e.g. Text Inputs etc.)
$il-FormColor: $il-text-light-color;
$il-FormBgColor: $il-main-bg;
$il-FormInputFontSize: $il-font-size-small;

// from delos_cont.css
/*
h1 {
	margin-top: 12px;
	margin-bottom: 8px;
	font-size: 140%;
	font-weight: normal;
}

h2 {
	margin-top: 12px;
	margin-bottom: 8px;
	font-size: 130%;
	font-weight: normal;
}

h3 {
	margin-top: 12px;
	margin-bottom: 8px;
	font-size: 120%;
	font-weight: normal;
}

h4 {
	margin-top: 12px;
	margin-bottom: 8px;
	font-size: 115%;
	font-weight: normal;
}

h5 {
	margin-top: 12px;
	margin-bottom: 8px;
	font-size: 110%;
	font-weight: normal;
}

h6 {
	margin-top: 12px;
	margin-bottom: 8px;
	font-size: 105%;
	font-weight: normal;
}

p {
	margin-top: 8px;
	margin-bottom: 8px;
}

pre {
	font-size: 100%;
}

img {
	vertical-align: middle;
	border: 0 none;
}

div.framed {
	border: 1px solid #9eadba;
	padding: 0 10px;
	background-color: white;
	background-image: url(images/contentstyle/FramedBack.png);
	background-repeat: repeat-x;
}
*/

span.latex {
	color: green;
	font-weight: bold;
}

// no longer in use?
div.ilFrame {
	margin-top: -40px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
    @include box-shadow(0 0 40px #808080);
	padding-top: 129px;
	background-color: $il-main-dark-bg;
	min-height: 100%;
	@media only screen and (max-width: $il-grid-float-breakpoint-max) {
		margin: 0;
		width: 100%;
	}
}

// used to be in Services/certificates

.il-deck {
	.il-card {
		.caption {
			div.icon.small {
				vertical-align: middle;
			}
		}
	}
}

// should be used as mixins instead of classes in html template

.il-multi-line-cap-2 {
	@include il-multi-line-cap-mixin(2);
}

.il-multi-line-cap-3 {
	@include il-multi-line-cap-mixin(3);
}

.il-multi-line-cap-5 {
	@include il-multi-line-cap-mixin(5);
}

.il-multi-line-cap-10 {
	@include il-multi-line-cap-mixin(10);
}

// which of these are really used?
// solve with mixins in component if possible

.ilCenter {
	@include type-mix.ilCenter;
}

.ilRight {
	@include type-mix.ilRight;
}

.ilLeft {
	@include type-mix.ilLeft;
}

.ilValignMiddle {
	vertical-align: middle;
}

.ilWhiteSpaceNowrap {
	white-space: nowrap;
}

/* PreventBreakOut, see https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */
.ilPreventBreakOut {
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-word;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* ----------------- alternative text styles ------------- */
.base {
	text-decoration: none;
	font-size: $il-font-size-base;
}

.small {
	text-decoration: none;
	font-size: $il-font-size-small;
}

.xsmall {
	text-decoration: none;
	font-size: $il-font-size-xsmall;
}

.smallgreen {
	text-decoration: none;
	font-size: $il-font-size-small;
	color: green;
}

.smallred {
	text-decoration: none;
	font-size: $il-font-size-small;
	color: $il-danger-color;
}

.obligatory {
	font-weight: $il-font-weight-base;
	color: #800000;
	font-variant: normal;
}

.warning {
	text-decoration: none;
	font-weight: $il-font-weight-bold;
	color: $il-danger-color;
}

div.Access {
	text-decoration: none;
	font-weight: $il-font-weight-bold;
	text-decoration: underline;
	color: $il-danger-color;
}

.asterisk {
	color: $il-danger-color;
	font-size: $il-font-size-small;
}

.default {
	text-decoration: none;
	font-weight: $il-font-weight-base;
}


.quote {
	font-style: italic;
	font-weight: $il-font-weight-base;
}

.subtitle {
	font-style: italic;
	font-weight: $il-font-weight-base;
	font-size: $il-font-size-small;
}

.questiontext {
	font-weight: $il-font-weight-bold;
}

.bold {
	font-weight: $il-font-weight-bold;
}

.light {
	color: $il-text-light-color;
}