@import '../../base.less';

@import './_var.less';

.@{dialog} {
  overflow: hidden;
  width: @dialog-width;
  border-radius: @dialog-border-radius;
  background-color: @bg-color-container;

  &__wrapper {
    --td-popup-border-radius: @dialog-border-radius;
  }

  &__close-btn {
    position: absolute;
    top: @spacer;
    right: @spacer;
    font-size: @dialog-close-icon-size;
    color: @dialog-close-color;
  }

  &__content {
    padding: @spacer-3 @spacer-3 0;
    max-height: @dialog-body-max-height;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: @font-size-m;

    &:empty {
      display: none;
    }
  }

  &__header {
    text-align: center;
    font: @dialog-title-font;
    color: @dialog-title-color;
  }

  &__header + &__body {
    margin-top: @spacer;
  }

  &__body {
    overflow-y: scroll;
    text-align: center;
    -webkit-overflow-scrolling: touch;
    font: @dialog-content-font;
    color: @dialog-content-color;

    &-text {
      word-wrap: break-word;
    }

    &--left {
      text-align: left;
    }

    &--right {
      text-align: right;
    }
  }

  &__footer {
    display: flex;
    padding: @spacer-3;

    &--column {
      flex-flow: column-reverse;

      .@{dialog}__button {
        width: 100%;
        flex: unset;
      }
    }

    &--full {
      padding: @spacer-4 0 0;
    }
  }

  &__button {
    position: relative;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &--horizontal + &--horizontal {
      margin-left: @spacer-1;
    }

    &--vertical + &--vertical {
      margin-bottom: @spacer-1;
    }

    &--text {
      flex: 1;

      --td-button-border-radius: 0;
      --td-button-medium-height: 56px;

      border-radius: 0;

      &::before {
        content: ' ';
        position: absolute;
        box-sizing: border-box;
        top: 0;
        left: 0;
        border-top: 1px solid @component-stroke;
        border-left: 1px solid @component-stroke;
        transform: scale(.5);
        transform-origin: 0 0;
        width: 200%;
        height: 200%;
        border-radius: 0;
      }
    }
  }
}