$modal__class: #{$prefix}-modal;
$modal-overlay__background: rgba($md-black-100, 0.45) !default;

// We use these to control the style of the modal itself.
$modal__background: $md-white-100 !default;
$modal__color: $md-black-100;
$modal-message__color: $md-gray-70;

// Modal Padding
$modal__padding: rem-calc(16);
$modal__padding--full-screen: rem-calc(24);
$modal__padding--body: 0 rem-calc(32);

// We use this to set the default radius used throughout the core.
$modal__radius: $global-radius !default;

// Modal Dialog Settings
$modal-dialog__top: rem-calc(100);
$modal-dialog__padding: rem-calc(20);
$modal-dialog__border: 1px solid $black-12;
$modal-dialog__box-shadow: 0 8px 16px 0 $black-08;
$modal-header__padding--dialog: 0 0 rem-calc(12) 0;

// Modal Header Sizes
$modal-header__padding: $modal__padding;
$modal-header__font-size: rem-calc(16);
$modal-header__line-height: rem-calc(24);

$modal-header__padding--large: rem-calc(32) rem-calc(16) rem-calc(16)
  rem-calc(16);
$modal-header__font-size--large: rem-calc(26);
$modal-header__line-height--large: rem-calc(32);

$modal-header__padding--full-screen: rem-calc(32) rem-calc(16) rem-calc(16)
  rem-calc(16);
$modal-header__font-size--full-screen: rem-calc(36);
$modal-header__line-height--full-screen: rem-calc(48);

$modal-header__font-size--mobile: rem-calc(14);

// Modal Size
$modal__width--full-screen: 100vw;
$modal__width--large: 964px;
$modal__width--medium: 640px;
$modal__width--small: 480px;

$modal__height--full-screen: 100vh;
$modal__height--large: 720px;
$modal__height--medium: 480px;
$modal__height--small: 360px;

// Modal Offset
$modal__top--large: rem-calc(43);
$modal__top--medium: rem-calc(47);
$modal__top--small: rem-calc(47);

$modal__top--tablet-medium: rem-calc(57);
$modal__top--tablet-small: rem-calc(53);