/*******************************
             Modal
*******************************/

@modalBackground: @white;
@modalBorder: none;
@modalZIndex: 1001;
@modalBorderRadius: @defaultBorderRadius;
@modalTransformOrigin: 50% 25%;
@boxShadow:
  1px 3px 3px 0px rgba(0, 0, 0, 0.2),
  1px 3px 15px 2px rgba(0, 0, 0, 0.2)
;

/* Close Icon */
@modalCloseOpacity: 0.8;
@modalCloseSize: 1.25em;
@modalCloseColor: @white;

@modalCloseHitbox: 2.25rem;
@modalCloseDistance: 0.25rem;
@modalCloseHitBoxOffset: (@modalCloseHitbox - 1rem) / 2;
@modalClosePadding: @modalCloseHitBoxOffset 0rem 0rem 0rem;
@modalCloseTop: -(@modalCloseDistance + @modalCloseHitbox);
@modalCloseRight: -(@modalCloseDistance + @modalCloseHitbox);

/* Header */
@modalHeaderMargin: 0em;
@modalHeaderVerticalPadding: 1.25rem;
@modalHeaderHorizontalPadding: 1.5rem;
@modalHeaderPadding: @modalHeaderVerticalPadding @modalHeaderHorizontalPadding;
@modalHeaderBackground: @white;
@modalHeaderColor: @darkTextColor;
@modalHeaderFontSize: @huge;
@modalHeaderBoxShadow: none;
@modalHeaderFontWeight: @bold;
@modalHeaderFontFamily: @headerFont;
@modalHeaderBorder: 1px solid @borderColor;

/* Content */
@modalContentFontSize: 1em;
@modalContentPadding: 1.5rem;
@modalContentLineHeight: 1.4;
@modalContentBackground: #FFFFFF;

/* Image / Description */
@modalImageWidth: '';
@modalImageIconSize: 8rem;
@modalImageVerticalAlign: top;

@modalDescriptionDistance: 2em;
@modalDescriptionMinWidth: '';
@modalDescriptionWidth: auto;
@modalDescriptionVerticalAlign: top;

/* Modal Actions */
@modalActionBorder: 1px solid @borderColor;
@modalActionBackground: @offWhite;
@modalActionPadding: 1rem 1rem;
@modalActionAlign: right;

@modalButtonDistance: 0.75em;

/* Inner Close Position (Tablet/Mobile) */
@modalInnerCloseTop: (@modalHeaderVerticalPadding - @modalCloseHitBoxOffset + (@lineHeight - 1em));
@modalInnerCloseRight: 1rem;
@modalInnerCloseColor: @textColor;

/* Mobile Positions */
@modalMobileHeaderPadding: 0.75rem 1rem;
@modalMobileContentPadding: 1rem;
@modalMobileImagePadding: 0rem 0rem 1rem;
@modalMobileDescriptionPadding: 1rem 0rem ;
@modalMobileButtonDistance: 1rem;
@modalMobileActionPadding: 1rem 1rem (1rem - @modalMobileButtonDistance);
@modalMobileImageIconSize: 5rem;
@modalMobileCloseTop: 0.5rem;
@modalMobileCloseRight: 0.5rem;

/* Responsive Widths */
@modalMobileWidth: 95%;
@modalTabletWidth: 88%;
@modalComputerWidth: 850px;
@modalLargeMonitorWidth: 900px;
@modalWidescreenMonitorWidth: 950px;

@modalMobileMargin: 0em 0em 0em 0em;
@modalTabletMargin: 0em 0em 0em 0em;
@modalComputerMargin: 0em 0em 0em 0em;
@modalLargeMonitorMargin: 0em 0em 0em 0em;
@modalWidescreenMonitorMargin: 0em 0em 0em 0em;

@modalFullScreenWidth: 95%;
@modalFullScreenOffset: 0em;
@modalFullScreenMargin: 1em auto;

/* Coupling */
@modalInvertedBoxShadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2);

/*-------------------
       States
--------------------*/

@modalLoadingZIndex: -1;

/*-------------------
        Types
--------------------*/

/* Basic */
@modalBasicModalHeaderColor: @white;
@modalBasicModalColor: @white;
@modalBasicModalCloseTop: 1rem;
@modalBasicModalCloseRight: 1.5rem;
@modalBasicInnerCloseColor: @white;

@modalBasicInvertedModalColor: @textColor;
@modalBasicInvertedModalHeaderColor: @darkTextColor;

/* Top Aligned */
@modalTopAlignedMargin: 5vh;
@modalMobileTopAlignedMargin: 1rem;

/* Scrolling Margin */
@modalScrollingMargin: 1rem;
@modalMobileScrollingMargin: @modalMobileTopAlignedMargin;

/* Scrolling Content */
@modalScrollingContentMaxHeight: calc(80vh - 10em);

/*-------------------
      Variations
--------------------*/

/* Size Widths */
@modalMiniRatio: 0.4;
@modalTinyRatio: 0.6;
@modalSmallRatio: 0.8;
@modalLargeRatio: 1.2;

/* Derived Responsive Sizes */
@modalMiniHeaderSize: 1.3em;
@modalMiniMobileWidth: @modalMobileWidth;
@modalMiniTabletWidth: (@modalTabletWidth * @modalMiniRatio);
@modalMiniComputerWidth: (@modalComputerWidth * @modalMiniRatio);
@modalMiniLargeMonitorWidth: (@modalLargeMonitorWidth * @modalMiniRatio);
@modalMiniWidescreenMonitorWidth: (@modalWidescreenMonitorWidth * @modalMiniRatio);

@modalMiniMobileMargin: 0em 0em 0em 0em;
@modalMiniTabletMargin: 0em 0em 0em 0em;
@modalMiniComputerMargin: 0em 0em 0em 0em;
@modalMiniLargeMonitorMargin: 0em 0em 0em 0em;
@modalMiniWidescreenMonitorMargin: 0em 0em 0em 0em;

@modalTinyHeaderSize: 1.3em;
@modalTinyMobileWidth: @modalMobileWidth;
@modalTinyTabletWidth: (@modalTabletWidth * @modalTinyRatio);
@modalTinyComputerWidth: (@modalComputerWidth * @modalTinyRatio);
@modalTinyLargeMonitorWidth: (@modalLargeMonitorWidth * @modalTinyRatio);
@modalTinyWidescreenMonitorWidth: (@modalWidescreenMonitorWidth * @modalTinyRatio);

@modalTinyMobileMargin: 0em 0em 0em 0em;
@modalTinyTabletMargin: 0em 0em 0em 0em;
@modalTinyComputerMargin: 0em 0em 0em 0em;
@modalTinyLargeMonitorMargin: 0em 0em 0em 0em;
@modalTinyWidescreenMonitorMargin: 0em 0em 0em 0em;

@modalSmallHeaderSize: 1.3em;
@modalSmallMobileWidth: @modalMobileWidth;
@modalSmallTabletWidth: (@modalTabletWidth * @modalSmallRatio);
@modalSmallComputerWidth: (@modalComputerWidth * @modalSmallRatio);
@modalSmallLargeMonitorWidth: (@modalLargeMonitorWidth * @modalSmallRatio);
@modalSmallWidescreenMonitorWidth: (@modalWidescreenMonitorWidth * @modalSmallRatio);

@modalSmallMobileMargin: 0em 0em 0em 0em;
@modalSmallTabletMargin: 0em 0em 0em 0em;
@modalSmallComputerMargin: 0em 0em 0em 0em;
@modalSmallLargeMonitorMargin: 0em 0em 0em 0em;
@modalSmallWidescreenMonitorMargin: 0em 0em 0em 0em;

@modalLargeHeaderSize: 1.6em;
@modalLargeMobileWidth: @modalMobileWidth;
@modalLargeTabletWidth: @modalTabletWidth;
@modalLargeComputerWidth: (@modalComputerWidth * @modalLargeRatio);
@modalLargeLargeMonitorWidth: (@modalLargeMonitorWidth * @modalLargeRatio);
@modalLargeWidescreenMonitorWidth: (@modalWidescreenMonitorWidth * @modalLargeRatio);

@modalLargeMobileMargin: 0em 0em 0em 0em;
@modalLargeTabletMargin: 0em 0em 0em 0em;
@modalLargeComputerMargin: 0em 0em 0em 0em;
@modalLargeLargeMonitorMargin: 0em 0em 0em 0em;
@modalLargeWidescreenMonitorMargin: 0em 0em 0em 0em;