.base {
  background-color: var(--theme-overlay);
  display: none;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;

  .sheet {
    background-color: var(--theme-float);
    bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: 90%;
    position: absolute;
    width: 100%;

    .actionList {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: auto;
    }
  }
  .item {
    align-items: center;
    color: var(--theme-float-on);
    display: flex;
    flex-shrink: 0;
    gap: 16px;
    height: var(--nav-bottom-bar-height);
    padding: 0 16px;

    .label {
      font-size: 14px;
    }
    .spacer {
      width: calc(24px + 2 * 16px);
    }
  }
}
.sheetEnter {
  display: flex;
  opacity: 0;

  .sheet {
    bottom: -50%;
  }
}
.sheetEnterActive {
  opacity: 1;
  transition: opacity var(--animation-curve);

  .sheet {
    bottom: 0;
    transition: bottom var(--animation-curve);
  }
}
.sheetEnterDone {
  display: flex;

  .sheet {
    bottom: 0;
  }
}
.sheetExit {
  display: flex;
  opacity: 1;

  .sheet {
    bottom: 0;
  }
}
.sheetExitActive {
  opacity: 0;
  transition: opacity var(--animation-curve);

  .sheet {
    bottom: -50%;
    transition: bottom var(--animation-curve);
  }
}
.sheetExitDone {
  display: none;

  .sheet {
    bottom: -50%;
  }
}
