/*-------------------
       Modal
--------------------*/

@modalBorder: 1px solid #DDDDDD;

@modalWidth: 90%;
@modalXOffset: -(@modalWidth / 2);
@modalBorderRadius: 0.25em;

/* Close Icon */
@modalCloseOpacity: 0.8;
@modalCloseSize: 1.25em;
@modalCloseColor: @white;
@modalCloseHitbox: 2.25em;
@modalCloseDistance: 0.25em;

@modalClosePadding: ( (@modalCloseHitbox - 1em) / 2) 0em 0em 0em;
@modalCloseTop: -(@modalCloseDistance + @modalCloseHitbox);
@modalCloseRight: -(@modalCloseDistance + @modalCloseHitbox);

/* Header */
@modalHeaderMargin: 0em;
@modalHeaderPadding: 1.5rem 2rem;

@modalHeaderFontSize: 1.6em;
@modalHeaderFontWeight: bold;
@modalHeaderFontFamily: @headerFont;

/* Content */
@modalContentFontSize: 1em;
@modalContentPadding: 2rem;
@modalContentLineHeight: 1.4;
@modalContentBackground: #F4F4F4;

/* Left / Right */
@modalImageMinWidth: 25%;
@modalImagePadding: 1em;

@modalImageIconSize: 8rem;

@modalDescriptionPadding: 1em;
@modalDescriptionMinWidth: '';

/* Modal Actions */
@modalActionPadding: 1rem 2rem;
@modalButtonDistance: 0.75em;

/* Mobile Positions */
@modalMobileImagePadding: 0em 0em 1em;
@modalMobileDescriptionPadding: 0em 0em 1em;
@modalMobileButtonDistance: 1em;

/* Inner Close Position (Responsive) */
@modalInnerCloseTop: 1.5rem;
@modalInnerCloseRight: 1rem;
@modalInnerCloseColor: @textColor;

/* Responsive Widths */
@modalMobileWidth: 95%;
@modalTabletWidth: 88%;
@modalComputerWidth: 74%;
@modalLargeMonitorWidth: 56%;
@modalWidescreenMonitorWidth: 42%;

@modalMobileMargin: 0em 0em 0em -(@modalMobileWidth / 2);
@modalTabletMargin: 0em 0em 0em -(@modalTabletWidth / 2);
@modalComputerMargin: 0em 0em 0em -(@modalComputerWidth / 2);
@modalLargeMonitorMargin: 0em 0em 0em -(@modalLargeMonitorWidth / 2);
@modalWidescreenMonitorMargin: 0em 0em 0em -(@modalWidescreenMonitorWidth / 2);


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

/* Basic */
@basicModalColor: @white;
@basicModalCloseTop: 1.5rem;
@basicModalCloseRight: 1rem;

/* Scrolling Margin */
@scrollingTopMargin: 1rem;


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

/* Sizes */
@modalSmallRatio: 0.6;
@modalLargeRatio: 1.2;

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

@modalSmallMobileMargin: 0em 0em 0em -(@modalSmallMobileWidth / 2);
@modalSmallTabletMargin: 0em 0em 0em -(@modalSmallTabletWidth / 2);
@modalSmallComputerMargin: 0em 0em 0em -(@modalSmallComputerWidth / 2);
@modalSmallLargeMonitorMargin: 0em 0em 0em -(@modalSmallLargeMonitorWidth / 2);
@modalSmallWidescreenMonitorMargin: 0em 0em 0em -(@modalSmallWidescreenMonitorWidth / 2);

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

@modalLargeMobileMargin: 0em 0em 0em -(@modalLargeMobileWidth / 2);
@modalLargeTabletMargin: 0em 0em 0em -(@modalLargeTabletWidth / 2);
@modalLargeComputerMargin: 0em 0em 0em -(@modalLargeComputerWidth / 2);
@modalLargeLargeMonitorMargin: 0em 0em 0em -(@modalLargeLargeMonitorWidth / 2);
@modalLargeWidescreenMonitorMargin: 0em 0em 0em -(@modalLargeWidescreenMonitorWidth / 2);