@import '../scss/init.scss';

.dialog {
  @include popup;
  @include center;
  padding: 24px 16px;

  @include respondTo_page(xsm) {
    padding: 24px 40px;
  };

  &_front {
    background: $c_paper;
    @include depth(24);
    width: 100%;
    max-width: 56px * 6;
    max-height: 100%;
    display: flex;
    flex-direction: column;

    opacity: 0;
    transform: translateY(30px);
    transition-duration: 300ms;
    @at-root .dialog.is_active > & {
      transform: translateY(0);
      opacity: 1;
    }
  }

  &_background {
    background-color: $c_dialog_bg;
    opacity: 0;
    transition: 300ms;
    @at-root .dialog.is_active > & {
      opacity: 1;
    }
  }

  // chrome mobile
  // need 3px to cover wrapper's box shadow
  $pxToCoverScrollShadow: 3px;

  &_title {
    padding: 24px - $pxToCoverScrollShadow;
    padding-bottom: 20px - $pxToCoverScrollShadow;
    font-size: $s_font_title;
    flex-shrink: 0;
  }

  &_title:empty {
    padding: $s_gutter / 2;
  }

  &_title:empty + &_contentWrapper {
    box-shadow:
      inset 0 -1px 0 0 $c_divider;
  }

  &_contentWrapper {
    @include allowScroll('y');
    box-shadow:
      inset 0 1px 0 0 $c_divider,
      inset 0 -1px 0 0 $c_divider;
  }

  &_content {
    position: relative;
    padding-bottom: 24px;
    padding-left: 24px;
    padding-right: 24px;
    min-height: 56px * 2;
    border-top: $pxToCoverScrollShadow solid $c_paper;
    border-bottom: $pxToCoverScrollShadow solid $c_paper;
  }

  &_actions {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    padding: $s_gutter / 2;
    &:empty {
      display: none;
    }
    &_item {
      margin-right: $s_gutter / 2;

      &:last-child {
        margin-right: 0;
      }
    }
  }
}


.dialog--noContentSidePadding {
  .dialog_content {
    padding-left: 0;
    padding-right: 0;
  }
}

.dialog--noTitlePadding {
  .dialog_title {
    padding: 0;
  }
}