@import "../colors.css";
@import "../spacing.css";
@import "../typography.css";

:root {
  --modal-actions-margin: var(--spacing-small);
  --modal-border-radius: 3px;
  --modal-box-shadow-color: rgba(0, 0, 0, 0.5);
  --modal-box-shadow: 3px 4px 10px 0 var(--modal-box-shadow-color);
  --modal-frame-background-color: var(--color-white);
  --modal-frame-border-color: var(--color-squanchy-gray-20);
  --modal-frame-border: solid 1px rgba(242, 242, 243, 0.4);
  --modal-inner-mobile-width: 90vw;
  --modal-inner-default-width: 580px;
  --modal-inner-huge-width: 880px;
  --modal-inner-small-width: 352px;
  --modal-overlay-background: rgba(0, 0, 0, 0.7);
  --modal-padding: var(--spacing-small);
  --modal-margin: var(--spacing-large);
  --modal-child-padding:
    0
    var(--spacing-small)
    var(--spacing-small);
  --modal-child-first-child-padding: var(--spacing-small);

  --modal-title-color: var(--color-birdperson-gray-500);
  --modal-title-font-size: 14px;
  --modal-title-icon-spacing: var(--spacing-tiny);
  --modal-title-margin: 0;
  --modal-title-text-transform: uppercase;
  --modal-title-font-weight: var(--body-text-weight);

  --modal-section-background-color: var(--color-squanchy-gray-20);

  --modal-divider-border-color: var(--color-squanchy-gray-20);
  --modal-divider-border-style: solid;
  --modal-divider-border-width: 1px 0 0;
  --modal-divider-margin: 0 var(--spacing-small) var(--spacing-small);

  --modal-overlay-opacity-none: 0;
  --modal-overlay-opacity: 1;

  --modal-overlay-transition: opacity 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;

  --modal-content-transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;

  --modal-content-transform-none: translate(0, 0);
  --modal-content-transform: translateY(100vh) translateY(-88.75px);
}