@use '@/styles/variables.scss' as *;
.disaster-precaution-container {
  display: flex;
  flex-direction: column;
  gap: 10cpx;
  width: 100%;
  height: 100%;
  background: #eee;
  &__main,
  &__header {
    width: calc(100vw - 310cpx);
    background-color: $white-color;
    border-radius: 4cpx;
  }
  &__header {
    display: flex;
    flex-direction: column;
    gap: 16cpx;
    justify-content: space-between;
    padding: 16cpx 0 16cpx 22cpx;
    .back-icon {
      width: 16cpx;
      cursor: pointer;
    }
  }
  &__title {
    font-size: 20cpx;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }
  &__main {
    flex: 1;
    padding: 20cpx;
    .disaster-precaution {
      display: flex;
      flex-direction: column;
      gap: 20cpx;
      &__header--button {
        font-size: 14cpx;
        margin-bottom: 20cpx;
      }
    }
  }
  &__footer {
    @include flex-center;
    justify-content: flex-end;
    width: calc(100vw - 310cpx);
    height: 88cpx;
    padding: 28cpx;
    background-color: $white-color;
    border-radius: 4cpx;
  }
}

.active-status--div {
  @include flex-center;
  width: 100%;
  gap: 8cpx;
  .dot {
    width: 6cpx;
    height: 6cpx;
    border-radius: 50%;
  }
}
