/*

* # Semantic - Modal
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributor
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/

/*******************************

Theme

*******************************/

@type : ‘module’; @element : ‘modal’;

@import ‘../../theme.config’;

/*******************************

Modal

*******************************/

.ui.modal {

display: none;
position: fixed;
z-index: 1001;

top: 50%;
left: 50%;
text-align: left;

width: @width;
margin-left: @xOffset;

background: @background;
border: @border;
box-shadow: @boxShadow;

border-radius: @borderRadius;
user-select: text;
will-change: top, left, margin, transform, opacity;

}

.ui.modal > :first-child:not(.icon), .ui.modal > .icon:first-child + * {

border-top-left-radius: @borderRadius;
border-top-right-radius: @borderRadius;

}

.ui.modal > :last-child {

border-bottom-left-radius: @borderRadius;
border-bottom-right-radius: @borderRadius;

}

/*******************************

Content

*******************************/

/*————–

Close

—————*/

.ui.modal > .close {

cursor: pointer;
position: absolute;
top: @closeTop;
right: @closeRight;
z-index: 1;

opacity: @closeOpacity;
font-size: @closeSize;
color: @closeColor;

width: @closeHitbox;
height: @closeHitbox;
padding: @closePadding;

} .ui.modal > .close:hover {

opacity: 1;

}

/*————–

Header

—————*/

.ui.modal > .header {

display: block;
font-family: @headerFontFamily;
background: @headerBackground;
margin: @headerMargin;
padding: @headerPadding;
box-shadow: @headerBoxShadow;

font-size: @headerFontSize;
line-height: @headerLineHeight;
font-weight: @headerFontWeight;
color: @headerColor;
border-bottom: @headerBorder;

}

/*————–

Content

—————*/

.ui.modal > .content {

display: table;
table-layout: fixed;
width: 100%;
font-size: @contentFontSize;
line-height: @contentLineHeight;
padding: @contentPadding;
background: @contentBackground;

}

/* Image */ .ui.modal > .content > .image {

display: table-cell;
width: @imageWidth;
vertical-align: @imageVerticalAlign;

} .ui.modal > .content > .image[class*=“top aligned”] {

vertical-align: top;

} .ui.modal > .content > .image[class*=“top aligned”] {

vertical-align: middle;

}

/* Description */ .ui.modal > .content > .description {

display: table-cell;
vertical-align: top;
vertical-align: @descriptionVerticalAlign;

}

.ui.modal > .content > .icon + .description, .ui.modal > .content > .image + .description {

min-width: @descriptionMinWidth;
width: @descriptionWidth;
padding-left: @descriptionDistance;

}

/rtl:ignore/ .ui.modal > .content > .image > i.icon {

font-size: @imageIconSize;
margin: 0em;
opacity: 1;
width: auto;

}

/*————–

Actions

—————*/

.ui.modal .actions {

background: @actionBackground;
padding: @actionPadding;
border-top: @actionBorder;
text-align: @actionAlign;

} .ui.modal .actions > .button {

margin-left: @buttonDistance;

}

/*——————-

Responsive

——————–*/

/* Modal Width */ @media only screen and (max-width : @largestMobileScreen) {

.ui.modal {
  width: @mobileWidth;
  margin: @mobileMargin;
}

} @media only screen and (min-width : @tabletBreakpoint) {

.ui.modal {
  width: @tabletWidth;
  margin: @tabletMargin;
}

} @media only screen and (min-width : @computerBreakpoint) {

.ui.modal {
  width: @computerWidth;
  margin: @computerMargin;
}

} @media only screen and (min-width : @largeMonitorBreakpoint) {

.ui.modal {
  width: @largeMonitorWidth;
  margin: @largeMonitorMargin;
}

} @media only screen and (min-width : @widescreenMonitorBreakpoint) {

.ui.modal {
  width: @widescreenMonitorWidth;
  margin: @widescreenMonitorMargin;
}

}

/* Tablet and Mobile */ @media only screen and (max-width : @computerBreakpoint) {

.ui.modal > .header {
  padding-right: @closeHitbox;
}
.ui.modal > .close {
  top: @innerCloseTop;
  right: @innerCloseRight;
  color: @innerCloseColor;
}

}

/* Mobile */ @media only screen and (max-width : @largestMobileScreen) {

.ui.modal > .header {
  padding: @mobileHeaderPadding !important;
  padding-right: @closeHitbox !important;
}
.ui.modal > .content {
  display: block;
  padding: @mobileContentPadding !important;
}
.ui.modal > .close {
  top: @mobileCloseTop !important;
  right: @mobileCloseRight !important;
}

/*rtl:ignore*/
.ui.modal .content > .image {
  display: block;
  max-width: 100%;
  margin: 0em auto !important;
  text-align: center;
  padding: @mobileImagePadding !important;
}
.ui.modal > .content > .image > i.icon {
  font-size: @mobileImageIconSize;
  text-align: center;
}

/*rtl:ignore*/
.ui.modal .content > .description {
  display: block;
  width: 100% !important;
  margin: 0em !important;
  padding: @mobileDescriptionPadding !important;
  box-shadow: none;
}

.ui.modal > .actions {
  padding: @mobileActionPadding !important;
}
.ui.modal .actions > .buttons,
.ui.modal .actions > .button {
  margin-bottom: @mobileButtonDistance;
}

}

/*******************************

Types

*******************************/

.ui.basic.modal {

background-color: transparent;
border: none;
box-shadow: 0px 0px 0px 0px;
color: @basicModalColor;

} .ui.basic.modal > .header, .ui.basic.modal > .content, .ui.basic.modal > .actions {

background-color: transparent;

} .ui.basic.modal > .header {

color: @basicModalHeaderColor;

} .ui.basic.modal > .close {

top: @basicModalCloseTop;
right: @basicModalCloseRight;

}

/* Tablet and Mobile */ @media only screen and (max-width : @computerBreakpoint) {

.ui.basic.modal > .close {
  color: @basicInnerCloseColor;
}

}

/*******************************

Variations

*******************************/

/* A modal that cannot fit on the page */ .scrolling.dimmable.dimmed {

overflow: hidden;

} .scrolling.dimmable.dimmed > .dimmer {

overflow: auto;
-webkit-overflow-scrolling: touch;

} .scrolling.dimmable > .dimmer {

position: fixed;

}

.ui.scrolling.modal {

position: static;
margin: @scrollingMargin auto !important;

}

@media only screen and (max-width : @computerBreakpoint) {

.ui.scrolling.modal {
  margin-top: @mobileScrollingMargin;
  margin-bottom: @mobileScrollingMargin;
}

}

/*******************************

States

*******************************/

.ui.active.modal {

display: block;

}

/*******************************

Variations

*******************************/

/*————–

Full Screen

—————*/

.ui.fullscreen.modal {

width: @fullScreenWidth !important;
left: @fullScreenOffset !important;
margin: @fullScreenMargin;

} .ui.fullscreen.scrolling.modal {

left: 0em !important;

} .ui.fullscreen.modal > .header {

padding-right: @closeHitbox;

} .ui.fullscreen.modal > .close {

top: @innerCloseTop;
right: @innerCloseRight;
color: @innerCloseColor;

}

/*————–

Size

—————*/

.ui.modal {

font-size: @medium;

}

/* Small */ .ui.small.modal > .header {

font-size: @smallHeaderSize;

}

/* Small Modal Width */ @media only screen and (max-width : @largestMobileScreen) {

.ui.small.modal {
  width: @smallMobileWidth;
  margin: @smallMobileMargin;
}

} @media only screen and (min-width : @tabletBreakpoint) {

.ui.small.modal {
  width: @smallTabletWidth;
  margin: @smallTabletMargin;
}

} @media only screen and (min-width : @computerBreakpoint) {

.ui.small.modal {
  width: @smallComputerWidth;
  margin: @smallComputerMargin;
}

} @media only screen and (min-width : @largeMonitorBreakpoint) {

.ui.small.modal {
  width: @smallLargeMonitorWidth;
  margin: @smallLargeMonitorMargin;
}

} @media only screen and (min-width : @widescreenMonitorBreakpoint) {

.ui.small.modal {
  width: @smallWidescreenMonitorWidth;
  margin: @smallWidescreenMonitorMargin;
}

}

/* Large Modal Width */ .ui.large.modal > .header {

font-size: @largeHeaderSize;

} @media only screen and (max-width : @largestMobileScreen) {

.ui.large.modal {
  width: @largeMobileWidth;
  margin: @largeMobileMargin;
}

} @media only screen and (min-width : @tabletBreakpoint) {

.ui.large.modal {
  width: @largeTabletWidth;
  margin: @largeTabletMargin;
}

} @media only screen and (min-width : @computerBreakpoint) {

.ui.large.modal {
  width: @largeComputerWidth;
  margin: @largeComputerMargin;
}

} @media only screen and (min-width : @largeMonitorBreakpoint) {

.ui.large.modal {
  width: @largeLargeMonitorWidth;
  margin: @largeLargeMonitorMargin;
}

} @media only screen and (min-width : @widescreenMonitorBreakpoint) {

.ui.large.modal {
  width: @largeWidescreenMonitorWidth;
  margin: @largeWidescreenMonitorMargin;
}

}

.loadUIOverrides();