.nav-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 0;

  .nav-item {
    display: flex;
  }

  .below-nav .nav-item {
    display: flex;
  }
}

.nav-bar-buttons-wrapper {
  position: absolute;
  top: 25rem;
  font-size: 11px;
  font-weight: 500;
  display: flex;
  padding: 8px;
  border-radius: 5px;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: center;
  width: 0;

  .on {
    opacity: 1 !important;
  }

  .nav-btn {
    all: unset;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
    padding-right: 16px;
    border-radius: 32px;
    background-color: var(--light);
    font-size: 16px;
    line-height: 20px;
    overflow: hidden;
    height: 24px;
    white-space: nowrap;
    flex: 16px 0;
    opacity: 0.6;
    transition: flex 0.2s cubic-bezier(0.2, 0, 0, 1),
      opacity 0.2s cubic-bezier(0.2, 0, 0, 1);

    .nav-item-icon {
      height: 24px;
      aspect-ratio: 1;
      font-size: 24px;
      font-weight: 600;
    }

    .nav-item-label {
      opacity: 0;
      transition: opacity 0.1s cubic-bezier(0.2, 0, 0, 1);
      font-size: 18px;
      font-weight: 700;
    }

    &:hover {
      opacity: 0.8;
    }

    &.active {
      opacity: 1;
    }

    &.active,
    &:hover {
      flex: 1;

      .nav-item-label {
        opacity: 1;
      }
    }

    cursor: pointer;
  }
}

.nav-bar-wrapper {
  left: 3px;
  bottom: 5px;
  font-size: 15px;
  position: absolute;
  color: var(--light);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .nav-bar-buttons {
    display: flex;
  }

  .nav-bar-setting,
  .nav-bar-location {
    height: 30px;
    width: 30px;
    border: 1px solid #00000008;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: #505050c7;
    margin-right: 3;

    &:hover {
      background-color: #252424c7;
      border: 1px solid #ffffff47;
    }
  }
}

/**收展**/

.fab {
  width: 20px;
  height: 20px;
  background-color: #454545;
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.41, -0.86, 0.76, 1.89);
  position: absolute;
  top: 22.5rem;
  left: 8px;
  color: #ffffff00;
  font-size: 11px;
  font-weight: 500;
  display: flex;
  padding: 8px;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: center;
  border-radius: 5px;
  display: none;

  .option {
    width: 4px;
    height: 4px;
    overflow: hidden;
    background-color: #ffffff00;
    border-radius: 5px;
    position: absolute;
    top: calc(50% - 3px);
    transition: 0.3s cubic-bezier(0.41, -0.86, 0.76, 1.89);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--light);

    svg {
      font-size: 20px;
      color: var(--light);
      transform: scale(0);
      transition: 0.5s cubic-bezier(0.41, -2, 0.76, 2);
    }

    &:hover {
      background-color: #252424c7;
      border: 1px solid #ffffff47;
    }
  }

  .open {
    width: 75px;
    height: 30px;
    background-color: #505050c7;
    border: 1px solid #505050c7;

    span {
      color: var(--light);
    }
  }

  .open.intensity-report {
    transform: translate(35px, -15px);
    left: calc((100% / 3) - 3px);
  }

  .open.source-report {
    transform: translate(35px, 20px);
    left: calc((100% / 3) - 3px);
  }

  .open.earthquake-report {
    transform: translate(35px, 55px);
    left: calc((100% / 3) - 3px);
  }

  .open.tsunami-warning {
    transform: translate(35px, 90px);
    left: calc((100% / 3) - 3px);
  }

  .open.earthquake-warning {
    transform: translate(35px, 125px);
    left: calc((100% / 3) - 3px);
  }

  .close {
    width: 35px;
    height: 35px;
    left: 0;
    top: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #00000008;

    &:hover {
      background-color: #252424c7;
      border: 1px solid #ffffff47;
    }

    .close-icon,
    .open-icon {
      color: var(--light);
      font-size: 20px;
      transform: scale(0);
    }

    .open-icon {
      transform: scale(1);
      left: 8px;
      position: relative;
      margin-bottom: 3px;
    }
  }

  .open {
    .close-icon {
      transform: scale(1);
      transition: 0.5s cubic-bezier(0.41, -2, 0.76, 2);
      left: 0px;
      position: relative;
    }

    .open-icon {
      position: fixed;
      left: -999;
    }
  }
}
