@class-prefix-popup: ~'amh-popup';

.@{class-prefix-popup} {
  --z-index: var(--amh-popup-z-index, 1000);

  position: fixed;
  z-index: var(--z-index);
}

.@{class-prefix-popup}-body {
  position: fixed;
  background-color: var(--amh-color-background);
  z-index: calc(var(--z-index) + 10);

  .@{class-prefix-popup}-close-icon {
    position: absolute;
    z-index: 100;
  }

  &-position-bottom {
    width: 100%;
    bottom: 0;
    left: 0;
    .@{class-prefix-popup}-close-icon {
      right: 8px;
      top: 8px;
    }
  }
  &-position-top {
    width: 100%;
    top: 0;
    left: 0;
    .@{class-prefix-popup}-close-icon {
      right: 8px;
      bottom: 8px;
    }
  }
  &-position-left {
    height: 100%;
    top: 0;
    left: 0;
    .@{class-prefix-popup}-close-icon {
      right: 8px;
      top: 8px;
    }
  }
  &-position-right {
    height: 100%;
    top: 0;
    right: 0;
    .@{class-prefix-popup}-close-icon {
      left: 8px;
      top: 8px;
    }
  }
}

.@{class-prefix-popup}-close-icon {
  cursor: pointer;
  padding: 4px;
  font-size: 18px;
  color: var(--amh-color-weak);
}
.closeIcon{
  width:30px;
  height: 30px;
}