/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------

variables/variables-modal.less

--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */






/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------

Modal

--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */



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

@modal-width:                                                                   'auto';
@modal-width-screen-small:                                                      @grid-container-width-screen-small * 0.7;
@modal-width-screen-medium:                                                     @grid-container-width-screen-medium * 0.7;
@modal-width-screen-large:                                                      @grid-container-width-screen-large * 0.7;



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

@modal-margin-horizontal:                                                       @grid-gutter-width * 0.5;
@modal-margin-horizontal-screen-small:                                          @grid-gutter-width-screen-small;
@modal-margin-horizontal-screen-medium:                                         @grid-gutter-width-screen-medium;
@modal-margin-horizontal-screen-large:                                          @grid-gutter-width-screen-large;

@modal-margin-vertical:                                                         @grid-gutter-width * 0.5;
@modal-margin-vertical-screen-small:                                            @grid-gutter-width-screen-small;
@modal-margin-vertical-screen-medium:                                           @grid-gutter-width-screen-medium;
@modal-margin-vertical-screen-large:                                            @grid-gutter-width-screen-large;



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

@modal-box-sizing:                                                              border-box;
@modal-background-clip:                                                         padding-box;



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

@modal-border-radius:                                                           4px;
@modal-background-color:                                                        @white;
@modal-background-gradient-color-top:                                           null;
@modal-background-gradient-color-bottom:                                        null;
@modal-border-width:                                                            null;
@modal-border-color:                                                            null;
@modal-border-style:                                                            null;
@modal-border-top-width:                                                        null;
@modal-border-top-color:                                                        null;
@modal-border-top-style:                                                        null;
@modal-border-right-width:                                                      null;
@modal-border-right-color:                                                      null;
@modal-border-right-style:                                                      null;
@modal-border-bottom-width:                                                     null;
@modal-border-bottom-color:                                                     null;
@modal-border-bottom-style:                                                     null;
@modal-border-left-width:                                                       null;
@modal-border-left-color:                                                       null;
@modal-border-left-style:                                                       null;
@modal-shadow:                                                                  0px 0px 0px 1px rgba(0, 0, 0, 0.05),
                                                                                0px 20px 40px 1px rgba(0, 0, 0, 0.1);



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

@modal-transition-duration:                                                     0.3s;



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

@modal-header-padding-vertical:                                                 @grid-gutter-width * 1.0;
@modal-header-padding-vertical-screen-small:                                    @grid-gutter-width-screen-small * 1.0;
@modal-header-padding-vertical-screen-medium:                                   @grid-gutter-width-screen-medium * 1.0;
@modal-header-padding-vertical-screen-large:                                    @grid-gutter-width-screen-large * 1.0;

@modal-header-padding-horizontal:                                               @grid-gutter-width * 1.0;
@modal-header-padding-horizontal-screen-small:                                  @grid-gutter-width-screen-small * 1.0;
@modal-header-padding-horizontal-screen-medium:                                 @grid-gutter-width-screen-medium * 1.0;
@modal-header-padding-horizontal-screen-large:                                  @grid-gutter-width-screen-large * 1.0;



/* -----------------------------------------------------------------------------
Modal Header Styling
----------------------------------------------------------------------------- */

@modal-header-border-radius:                                                    null;
@modal-header-background-color:                                                 null;
@modal-header-background-gradient-color-top:                                    null;
@modal-header-background-gradient-color-bottom:                                 null;
@modal-header-border-width:                                                     null;
@modal-header-border-color:                                                     null;
@modal-header-border-style:                                                     null;
@modal-header-border-top-width:                                                 null;
@modal-header-border-top-color:                                                 null;
@modal-header-border-top-style:                                                 null;
@modal-header-border-right-width:                                               null;
@modal-header-border-right-color:                                               null;
@modal-header-border-right-style:                                               null;
@modal-header-border-bottom-width:                                              null;
@modal-header-border-bottom-color:                                              null;
@modal-header-border-bottom-style:                                              null;
@modal-header-border-left-width:                                                null;
@modal-header-border-left-color:                                                null;
@modal-header-border-left-style:                                                null;
@modal-header-shadow:                                                           0px 1px 0px 0px rgba(0, 0, 0, 0.05);



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

@modal-body-padding-vertical:                                                   @grid-gutter-width * 1.0;
@modal-body-padding-vertical-screen-small:                                      @grid-gutter-width-screen-small * 1.0;
@modal-body-padding-vertical-screen-medium:                                     @grid-gutter-width-screen-medium * 1.0;
@modal-body-padding-vertical-screen-large:                                      @grid-gutter-width-screen-large * 1.0;

@modal-body-padding-horizontal:                                                 @grid-gutter-width * 1.0;
@modal-body-padding-horizontal-screen-small:                                    @grid-gutter-width-screen-small * 1.0;
@modal-body-padding-horizontal-screen-medium:                                   @grid-gutter-width-screen-medium * 1.0;
@modal-body-padding-horizontal-screen-large:                                    @grid-gutter-width-screen-large * 1.0;



/* -----------------------------------------------------------------------------
Modal Body Styling
----------------------------------------------------------------------------- */

@modal-body-border-radius:                                                      null;
@modal-body-background-color:                                                   null;
@modal-body-background-gradient-color-top:                                      null;
@modal-body-background-gradient-color-bottom:                                   null;
@modal-body-border-width:                                                       null;
@modal-body-border-color:                                                       null;
@modal-body-border-style:                                                       null;
@modal-body-border-top-width:                                                   null;
@modal-body-border-top-color:                                                   null;
@modal-body-border-top-style:                                                   null;
@modal-body-border-right-width:                                                 null;
@modal-body-border-right-color:                                                 null;
@modal-body-border-right-style:                                                 null;
@modal-body-border-bottom-width:                                                null;
@modal-body-border-bottom-color:                                                null;
@modal-body-border-bottom-style:                                                null;
@modal-body-border-left-width:                                                  null;
@modal-body-border-left-color:                                                  null;
@modal-body-border-left-style:                                                  null;
@modal-body-shadow:                                                             null;



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

@modal-footer-padding-vertical:                                                 @grid-gutter-width * 1.0;
@modal-footer-padding-vertical-screen-small:                                    @grid-gutter-width-screen-small * 1.0;
@modal-footer-padding-vertical-screen-medium:                                   @grid-gutter-width-screen-medium * 1.0;
@modal-footer-padding-vertical-screen-large:                                    @grid-gutter-width-screen-large * 1.0;

@modal-footer-padding-horizontal:                                               @grid-gutter-width * 1.0;
@modal-footer-padding-horizontal-screen-small:                                  @grid-gutter-width-screen-small * 1.0;
@modal-footer-padding-horizontal-screen-medium:                                 @grid-gutter-width-screen-medium * 1.0;
@modal-footer-padding-horizontal-screen-large:                                  @grid-gutter-width-screen-large * 1.0;



/* -----------------------------------------------------------------------------
Modal footer Styling
----------------------------------------------------------------------------- */

@modal-footer-border-radius:                                                    null;
@modal-footer-background-color:                                                 @canvas-pod-light-background-color;
@modal-footer-background-gradient-color-top:                                    null;
@modal-footer-background-gradient-color-bottom:                                 null;
@modal-footer-border-width:                                                     null;
@modal-footer-border-color:                                                     null;
@modal-footer-border-style:                                                     null;
@modal-footer-border-top-width:                                                 null;
@modal-footer-border-top-color:                                                 null;
@modal-footer-border-top-style:                                                 null;
@modal-footer-border-right-width:                                               null;
@modal-footer-border-right-color:                                               null;
@modal-footer-border-right-style:                                               null;
@modal-footer-border-bottom-width:                                              null;
@modal-footer-border-bottom-color:                                              null;
@modal-footer-border-bottom-style:                                              null;
@modal-footer-border-left-width:                                                null;
@modal-footer-border-left-color:                                                null;
@modal-footer-border-left-style:                                                null;
@modal-footer-shadow:                                                           0px -1px 0px 0px rgba(0, 0, 0, 0.05);



/* -----------------------------------------------------------------------------
Modal (Fullscreen)
----------------------------------------------------------------------------- */

@modal-fullscreen-container:                                                    100%;
@modal-fullscreen-container-screen-small:                                       @grid-container-width-screen-small * 0.8;
@modal-fullscreen-container-screen-medium:                                      @grid-container-width-screen-medium * 0.8;
@modal-fullscreen-container-screen-large:                                       @grid-container-width-screen-large * 0.8;






/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------

Modal Backdrop

--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */



/* -----------------------------------------------------------------------------
Modal Backdrop Styling
----------------------------------------------------------------------------- */

@modal-backdrop-background-color:                                               hsla(hue(color(@canvas-pod-dark-background-color)), saturation(color(@canvas-pod-dark-background-color)), lightness(color(@canvas-pod-dark-background-color)), 0.8);



/* -----------------------------------------------------------------------------
Modal Backdrop Transitions
----------------------------------------------------------------------------- */

@modal-backdrop-transition-duration:                                            @modal-transition-duration;