@import "../common/variables";
@import "../common/mixins";

.@{css-prefix} {
  &-mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    visibility: hidden;
    opacity: 0;
    transition: opacity .25s ease-in;
    -webkit-backface-visibility: hidden;
    z-index: 700;

    &.scale-out {
      transition: all .25s ease-in;
      transform: scale(0);

      &.show {
        transform: scale(1);
      }
    }

    &.scale-in {
      transition: all .25s ease-in;
      transform: scale(1.5);
      &.show {
        transform: scale(1);
      }
    }

    &.blur-dark-android {
      background: rgba(0, 0, 0, 0.85); //安卓
    }

    &.blur-dark-ios {
      background: rgba(0, 0, 0, 0.5); // IOS
      -webkit-backdrop-filter: blur(30px) saturate(180%);
    }

    &.blur-light-android {
      background: rgba(255, 255, 255, 0.96); //安卓
    }

    &.blur-light-ios {
      background: rgba(255, 255, 255, 0.8); // IOS
      -webkit-backdrop-filter: blur(30px) saturate(300%);
    }

    &.show {
      opacity: 1;
      visibility: visible;
    }
  }
}