@use 'sass:map';
@use 'sass:color';

@use 'common/var.scss'as *;
@use 'mixins/mixins'as *;
#{getClassName((popup, content-hidden))} {
  overflow: hidden;
}
#{getClassName((modal))} {
  #{joinValName((modal, width))}: 50%;
  position: fixed;
  left: 0;top:0;right: 0;
  width: 100%;height: 100%;overflow: auto;
  z-index: 2000;
  background-color: rgba(0,0,0,.7);
  transform: translateX(0) translateY(0);
  transition: .2s all;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  &.is-inmask {
    background-color: transparent;
  }
  &.is-top-center {
    align-items: flex-start;
    justify-content: center;
  }
  &.is-top-left {
    align-items: flex-start;
    justify-content: flex-start;
  }
  &.is-top-right {
    align-items: flex-start;
    justify-content: flex-end;
  }
  &.is-bottom-center {
    align-items: flex-end;
    justify-content: center;
  }
  &.is-bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
  }
  &.is-bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
  }
  &.is-fullscreen {
    #{getClassName((modal, main))} {
      width: 100% !important;
      max-width: inherit !important;
      max-height: inherit !important;
      margin: 0px;border-radius: 0px;
      height: 100% !important;
      overflow: auto;
      #{getClassName((modal, hd))} {
        position:sticky;
        top: 0;
        z-index: 1;
        background-color: #{getValName((color, neutral, 0))};
      }
      #{getClassName((modal, bd))} {
        flex: 1;
      }
      #{getClassName((modal, ft))} {
        position:sticky;
        bottom: 0;
        background-color: #{getValName((color, neutral, 0))};
      }
    }
  }
}

#{getClassName((modal, mode, drawer))} {
  #{getClassName((modal, main))} {
    border-radius: 0;
    margin: var(--os-space-none);
  }
  &.is-top-center,&.is-bottom-center {
    overflow: hidden;
    #{getClassName((modal, main))} {
      width: 100%;
      max-height: calc(100% - #{getValName((space, m))});
      overflow: auto;
      max-width: inherit;
    }
    #{getClassName((modal, hd))} {
      position:sticky;
      top: 0;
      z-index: 1;
      background-color: #{getValName((color, neutral, 0))};
    }
    #{getClassName((modal, ft))} {
      position:sticky;
      bottom: 0;
      background-color: #{getValName((color, neutral, 0))};
    }
  }
  &.is-top-left,&.is-top-right,&.is-bottom-left,&.is-bottom-right {
    overflow: hidden;
    #{getClassName((modal, main))} {
      height: 100%;
      max-width: calc(100% - #{getValName((space, m))});
      overflow: auto;
    }
    #{getClassName((modal, bd))} {
      flex: 1;
    }
  }
}
 
#{getClassName((modal, main))} {
  background-color: #{getValName((color, neutral, 0))};
  border-radius: #{getValName((border, radius, base))};
  display: flex;
  flex-direction: column;
  margin: #{getValName((space, m))};
  width: #{getValName((modal, width))};
  min-width: 320px;
  max-width: calc(100% - #{getValName((space, m))});
  box-shadow: 0 5px 15px rgba(0,0,0,.5);
  transition: .5s all;
}
#{getClassName((modal, hd))} {
  font-size: #{getValName((heading6))};
  // font-weight: 600;
  padding: #{getValName((space, base))} #{getValName((space, base))} #{getValName((space, none))} #{getValName((space, base))};
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
#{getClassName((modal, icon))} {
  > i {
    font-size: #{getValName((heading8))};
    cursor: pointer;
    &:hover {
      color: #{getValName((color, primary))};
    }
  }
}
#{getClassName((modal, bd))} {
  padding: #{getValName((space, base))};
}
#{getClassName((modal, ft))} {
  padding: #{getValName((space, none))} #{getValName((space, base))} #{getValName((space, base))} #{getValName((space, base))};
  text-align: right;
  > #{getClassName((button))} + #{getClassName((button))} {
    margin-left: #{getValName((space, s))}
  }
}

#{getClassName((modal, tip))} {
  #{getClassName((modal, main))} {
    max-width: calc(#{getValName((modal, width))} - #{getValName((space, m))});
  }
}

.modal-fade-enter-from, .modal-fade-leave-to {
  #{getClassName((modal, main))} {
    transform: translateX(0%) translateY(-50px);
    opacity: 0;
  }
  opacity: 0;
}


#{getClassName((modal, mode, drawer))}.modal-fade-enter-from, #{getClassName((modal, mode, drawer))}.modal-fade-leave-to {
  &.is-top-left,&.is-bottom-left {
    #{getClassName((modal, main))} {
      transform: translateX(-50px) translateY(0px);
    }
  }
  &.is-top-right,&.is-bottom-right {
    #{getClassName((modal, main))} {
      transform: translateX(50px) translateY(0px);
    }
  }
  &.is-bottom-center {
    #{getClassName((modal, main))} {
      transform: translateX(0px) translateY(50px);
    }
  }
}