{"version":3,"sources":["dialog/dialog.scss","dialog/_variables.scss"],"names":[],"mappings":"AAEA,gBAUE,kCAAA,CAAA,0BAAA,CAJA,2DAAA,CACA,8CCFqB,CDArB,0DCFiB,CDDjB,QAAA,CAEA,eAAA,CAHA,OAAA,CAOA,8ECJkB,CDIlB,yECJkB,CDIlB,sECJkB,CDKlB,qDAAA,CAAA,6CAAA,CAAA,wCAAA,CAAA,qCAAA,CAAA,uDAAA,CANA,+BAOA,CAEA,wBAZF,gBAaI,0CCXwB,CAAA,CDc1B,wBAEE,wECXwB,CDYxB,iDCXwB,CDSxB,iDCRwB,CDWxB,iBAAA,CAEA,kCACE,sECb2B,CDkB7B,mCAEE,wBAAA,CAAA,qBAAA,CAAA,0BAAA,CAAA,kBAAA,CADA,mBAAA,CAAA,oBAAA,CAAA,mBAAA,CAAA,YAAA,CAEA,gBAAA,CAMF,0EAEE,iECxB2B,CDuB3B,8ECvB2B,CD4B/B,yBACE,kBAAA,CAOA,oBAAA,CAIA,gCAAA,CAXA,cAAA,CAAA,UAAA,CAAA,MAAA,CAIA,kECpCuB,CDqCvB,wECpCyB,CDgCzB,gDC/BwB,CDiCxB,eAAA,CADA,iECnCqB,CDuCrB,iBAAA,CAIA,oBACA,CAEA,+BACE,eAAA,CAGF,gCACE,gBAAA,CAKJ,wBACE,mBAAA,CAAA,oBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,eAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,gBAAA,CAEA,iGAEE,kBAAA,CAGA,QAAA,CAHA,cAAA,CAAA,UAAA,CAAA,MAAA,CACA,uCCzDiB,CD0DjB,QACA,CAIA,yGAEE,2DChEsB,CDqE5B,iCAEE,WAAA,CACA,iHCtE4B,CDoE5B,iBCpE4B,CDwE5B,mHAIE,mBAAA,CADA,yECxE4B,CDuE5B,+CAEA,CAEA,oPAEE,iEC9E6B,CDiF/B,2IAEE,mGChF8B,CD+E9B,gGC/E8B,CDmFhC,yIAEE,oGCrF8B,CDoF9B,iGCpF8B,CDyFlC,0DACE,8HCzF2C,CD4F7C,yDACE,gIC5F0C,CDgG9C,2DAEE,SAAA,CACA,oDAAA,CAAA,4CAAA,CAGF,mCACE,SAAA,CACA,oDAAA,CAAA,4CAAA","file":"index.css","sourcesContent":["@import \"./variables\";\r\n\r\n.#{$component-prefix}dialog {\r\n  top: 45%;\r\n  left: 50%;\r\n  width: $dialog-width;\r\n  overflow: hidden;\r\n  font-size: $dialog-font-size;\r\n  background: $dialog-background-color;\r\n  border-radius: $dialog-border-radius;\r\n  transition: $dialog-transition;\r\n  transition-property: transform, opacity;\r\n  backface-visibility: hidden; // avoid blurry text after scale animation\r\n\r\n  @media (max-width: 321px) {\r\n    width: $dialog-small-screen-width;\r\n  }\r\n\r\n  &__header {\r\n    padding-top: $dialog-header-padding-top;\r\n    font-weight: $dialog-header-font-weight;\r\n    line-height: $dialog-header-line-height;\r\n    text-align: center;\r\n\r\n    &--isolated {\r\n      padding: $dialog-header-isolated-padding;\r\n    }\r\n  }\r\n\r\n  &__content {\r\n    &--isolated {\r\n      display: flex;\r\n      align-items: center;\r\n      min-height: 104px * $hd;\r\n    }\r\n  }\r\n\r\n  // Has title, set padding, color of message\r\n  &__header + &__content {\r\n    .#{$component-prefix}dialog__message {\r\n      padding-top: $dialog-has-title-message-padding-top;\r\n      color: $dialog-has-title-message-color;\r\n    }\r\n  }\r\n\r\n  &__message {\r\n    flex: 1;\r\n    max-height: $dialog-message-max-height;\r\n    padding: $dialog-message-padding;\r\n    overflow-y: auto;\r\n    font-size: $dialog-message-font-size;\r\n    line-height: $dialog-message-line-height;\r\n    text-align: center;\r\n    word-wrap: break-word;\r\n\r\n    // allow newline character\r\n    white-space: pre-wrap;\r\n    -webkit-overflow-scrolling: touch;\r\n\r\n    &--left {\r\n      text-align: left;\r\n    }\r\n\r\n    &--right {\r\n      text-align: right;\r\n    }\r\n  }\r\n\r\n\r\n  &__footer {\r\n    display: flex;\r\n    overflow: hidden;\r\n    user-select: none;\r\n\r\n    .#{$component-prefix}dialog__confirm,\r\n    .#{$component-prefix}dialog__cancel {\r\n      flex: 1;\r\n      height: $dialog-button-height;\r\n      margin: 0;\r\n      border: 0;\r\n    }\r\n\r\n    .#{$component-prefix}dialog__confirm {\r\n      &,\r\n      &:active {\r\n        color: $dialog-confirm-button-color;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__footer--rounded {\r\n    position: relative;\r\n    height: auto;\r\n    padding: $dialog-footer-rounded-padding;\r\n\r\n    .#{$component-prefix}dialog__confirm,\r\n    .#{$component-prefix}dialog__cancel {\r\n      height: $dialog-rounded-button-height;\r\n      font-size: $dialog-rounded-button-font-size;\r\n      border-radius: unset;\r\n\r\n      &,\r\n      &:active {\r\n        color: $dialog-rounded-button-active-color;\r\n      }\r\n\r\n      &:first-child {\r\n        border-top-left-radius: $dialog-rounded-button-border-radius;\r\n        border-bottom-left-radius: $dialog-rounded-button-border-radius;\r\n      }\r\n\r\n      &:last-child {\r\n        border-top-right-radius: $dialog-rounded-button-border-radius;\r\n        border-bottom-right-radius: $dialog-rounded-button-border-radius;\r\n      }\r\n    }\r\n\r\n    .#{$component-prefix}dialog__confirm {\r\n      background: $dialog-rounded-confirm-button-background-color;\r\n    }\r\n\r\n    .#{$component-prefix}dialog__cancel {\r\n      background: $dialog-rounded-cancel-button-background-color;\r\n    }\r\n  }\r\n\r\n  &-bounce-appear,\r\n  &-bounce-enter {\r\n    opacity: 0;\r\n    transform: translate3d(-50%, -50%, 0) scale(0.7);\r\n  }\r\n\r\n  &-bounce-exit-active {\r\n    opacity: 0;\r\n    transform: translate3d(-50%, -50%, 0) scale(0.9);\r\n  }\r\n}\r\n","@import \"../styles/prefix\";\r\n@import \"../styles/variables\";\r\n\r\n$dialog-width: var(--dialog-width, 320px * $hd);\r\n$dialog-small-screen-width: var(--dialog-small-screen-width, 90%);\r\n$dialog-font-size: var(--dialog-font-size, var(--font-size-lg, $font-size-lg));\r\n$dialog-transition: var(--dialog-transition, var(--animation-duration-base, $animation-duration-base));\r\n$dialog-border-radius: var(--dialog-border-radius, 16px * $hd);\r\n$dialog-background-color: var(--dialog-background-color, var(--white, $white));\r\n$dialog-header-font-weight: var(--dialog-header-font-weight, var(--font-weight-bold, $font-weight-bold));\r\n$dialog-header-line-height: var(--dialog-header-line-height, 24px * $hd);\r\n$dialog-header-padding-top: var(--dialog-header-padding-top, 26px * $hd);\r\n$dialog-header-isolated-padding: var(--dialog-header-isolated-padding, var(--padding-lg, $padding-lg) 0);\r\n$dialog-message-padding: var(--dialog-message-padding, 26px * $hd var(--padding-lg, $padding-lg));\r\n$dialog-message-font-size: var(--dialog-message-font-size, var(--font-size-md, $font-size-md));\r\n$dialog-message-line-height: var(--dialog-message-line-height, var(--line-height-md, $line-height-md));\r\n$dialog-message-max-height: var(--dialog-message-max-height, 60vh);\r\n$dialog-has-title-message-color: var(--dialog-has-title-message-color, var(--gray-7, $gray-7));\r\n$dialog-has-title-message-padding-top: var(--dialog-has-title-message-padding-top, var(--padding-xs, $padding-xs));\r\n\r\n$dialog-button-height: var(--dialog-button-height, 48px * $hd);\r\n$dialog-confirm-button-color: var(--dialog-confirm-button-color, var(--red, $red));\r\n\r\n$dialog-footer-rounded-padding: var(--dialog-footer-rounded-padding, var(--padding-xs, $padding-xs) var(--padding-lg, $padding-lg) var(--padding-md, $padding-md));\r\n\r\n$dialog-rounded-button-active-color: var(--dialog-rounded-button-active-color, var(--white, $white));\r\n$dialog-rounded-button-font-size: var(--dialog-rounded-button-font-size, var(--font-size-md, $font-size-md));\r\n$dialog-rounded-button-height: var(--dialog-rounded-button-height, 36px * $hd);\r\n$dialog-rounded-button-border-radius: var(--dialog-rounded-button-border-radius, var(--border-radius-max, $border-radius-max));\r\n$dialog-rounded-confirm-button-background-color: var(--dialog-rounded-confirm-button-background-color, var(--gradient-red, $gradient-red));\r\n$dialog-rounded-cancel-button-background-color: var(--dialog-rounded-cancel-button-background-color, var(--gradient-orange, $gradient-orange));\r\n"]}