@import "./base.less";

.@{css-prefix}.modal {
  font-size: 1em;
  position: fixed;
  z-index: 1001;
  text-align: left;
  background: #ffffff;
  border: none;
  width: @modal-width;
  color: rgba(0, 0, 0, .65);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px;

  &.attached {
    &.center {
      border-radius: 6px;
      top: 0;
      left: 50%;
    }
    &.top, &.bottom {
      width: 100%;
      left: 0;
      > .content {
        width: 100%;
        overflow: auto;
      }
    }
    &.top {
      top: 0;
    }
    &.bottom {
      bottom: 0;
    }
    &.left, &.right {
      height: 100%;
      top: 0;
      > .content {
        height: ~'calc(100% - 3em)';
        overflow: auto;
      }
    }
    &.left {
      left: 0;
    }
    &.right {
      right: 0;
    }
  }

  .image {
    font-size: 0;
    line-height: 1;
  }

  > i {
    opacity: .8;
    position: absolute;
    top: @padding-horizontal;
    right: @padding-horizontal;
    cursor: pointer;
  }

  > .header {
    padding: @padding-vertical @padding-horizontal;
    font-size: 1.1em;
    border-radius: @modal-border-radius @modal-border-radius 0 0;
    background: #F8F8F9;
    font-weight: bold;
    //opacity: .8;
  }

  > .content {
    border-radius: 0 0 @modal-border-radius @modal-border-radius;
    padding: @padding-horizontal;
  }
}

@media only screen and (max-width: @largestMobileScreen) {
  .@{css-prefix}.modal {
    width: 96%;
    margin: 0 0 0 -48%;
  }
}