@import '../../src/scss/vars';
@import '../../src/scss/mixins';
@import '../../src/scss/animate';

.ymu-dialog-enter,
.ymu-dialog-leave-to {
  opacity: 0;
  transform: scale(0.4);
}

.ymu-dialog-enter-active,
.ymu-dialog-leave-active {
  transition: all 300ms;
}

.ymu-dialog {
  overflow: hidden;
  z-index: $backdrop-zindex + 100;
  position: fixed;
  display: table;
  width: $dialog-width;
  max-width: $dialog-max-width;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  background-color: #fff;
  border-radius: $dialog-border-radius;
}

.ymu-dialog__hd {
  padding: $dialog-head-vertical-padding $dialog-head-horizontal-padding;
  font-size: $dialog-head-font-size;
  font-weight: $dialog-head-font-weigth;
}

.ymu-dialog__bd {
  padding: $dialog-body-padding-top $dialog-body-horizontal-padding $dialog-body-padding-bottom;
  min-height: $dialog-body-min-height;
  font-size: $dialog-body-font-size;
  line-height: $dialog-body-line-height;
  word-wrap: break-word;
  word-break: break-all;
  color: $dialog-body-font-color;
}

.ymu-dialog__ft {
  position: relative;
  display: flex;
  line-height: $dialog-foot-line-height;
  font-size: $dialog-foot-font-size;
  text-align: center;
  &::after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid $border-color;
    transform-origin: 0 0;
    transform: scaleY(.5);
  }
}

.ymu-dialog__btn {
  position: relative;
  display: block;
  flex: 1;
  font-size: $dialog-button-text-font-size;
  &::before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    left: 0;
    bottom: 0;
    border-left: 1px solid $border-color;
    transform-origin: 0 0;
    transform: scaleX(.5);
  }
  &:first-child {
    &::before {
      display: none;
    }
  }
  &--default {
    color: $dialog-button-text-default-color;
  }
  &--primary {
    color: $dialog-button-text-primary-color;
  }
  &--clickable {
    user-select: none;
    &:active {
      background-color: $click-active-bg-color;
    }
  }
}