@import '../variables.less';
@import '../mixins.less';

@modalBgColor: #e8e8e8;
@modalButonColor : @color-primary;
@modalButonBg: @modalBgColor;
@modalButonActiveBg: #d4d4d4;
@modalDuration: 300ms;

.modal {
  width: 13.5rem;
  position: fixed;
  z-index: 11000;
  left: 50%;
  margin-left: -6.75rem;
  margin-top: 0;
  top: 50%;
  text-align: center;
  border-radius: 0.35rem;
  opacity: 1;
  transform: translate3d(0,-50%,0) scale(1);
  transition-property: transform, opacity;
  transition-duration: @modalDuration;
  color: @color-text;

  &.modal-enter,
  &.modal-leave-active {
    opacity: 0;
    z-index: 11000-1;
    transform: translate3d(0,-50%,0) scale(0.815);
  }
}
.modal-inner {
  padding: 0.75rem;
  .hairline(bottom, #b5b5b5);
  border-radius: 0.35rem 0.35rem 0 0;
  position: relative;
  background: @modalBgColor;
}
.modal-title {
  font-weight: 500;
  font-size: 0.9rem;
  text-align: center;
  +.modal-text {
    margin-top: 0.25rem;
  }
}
.modal-buttons {
  height: 2.2rem;
  overflow: hidden;
  .flexbox();
  .justify-content(center);
  &.modal-buttons-vertical {
    display: block;
    height: auto;
  }
}
.modal-button {
  width: 100%;
  padding: 0 0.25rem;
  height: 2.2rem;
  font-size: 0.85rem;
  line-height: 2.2rem;
  text-align: center;
  color: @modalButonColor;
  background: @modalButonBg;
  display: block;
  position: relative;
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  .hairline(right, #b5b5b5);
  -webkit-box-flex:1;
  -ms-flex:1;
  &:first-child {
    border-radius: 0 0 0 0.35rem;
  }
  &:last-child {
    .hairline-remove(right);
    border-radius: 0 0 0.35rem 0;
  }
  &:first-child:last-child {
    border-radius: 0 0 0.35rem 0.35rem;
  }
  &.modal-button-bold {
    font-weight: 500;
  }
  &.modal-button-cancel {
    color: @color-text-secondary;
  }
  &.modal-button-disabled {
    color: @color-text-gray;
    &:active {
      background: @modalBgColor;
    }
  }
  &:not(.modal-button-disabled):active {
    background: @modalButonActiveBg;
  }
  .modal-buttons-vertical & {
    .hairline-remove(right);
    .hairline-remove(top);
    .hairline(bottom, #b5b5b5);
    border-radius: 0;
    &:last-child {
      border-radius: 0 0 0.35rem 0.35rem;
      .hairline-remove(bottom);
    }
  }
}
.modal-no-buttons {
  .modal-inner {
    border-radius: 0.35rem;
    .hairline-remove(bottom);
  }
  .modal-buttons {
    display: none;
  }
}